[新增] 首页UI

common/mixin.js

@@ -1,11 +1,11 @@
 export default{
 	data(){
 		return {
-			$pageScrollTop: 0, // 页面距离顶部的距离
+			pageScrollTop: 0, // 页面距离顶部的距离
 		}
 	},
 	onPageScroll(res) {
-		this.$pageScrollTop = res.scrollTop;
+		this.pageScrollTop = res.scrollTop;
 	},
 	methods: {
 		$isRight(val){

common/styles/common.css

@@ -219,6 +219,10 @@
 	font-weight: bold;
 }
 
+.lf-line-through{
+	text-decoration: line-through;
+}
+
 .lf-opacity{
 	opacity: .5;
 }

pages/index/index.vue

@@ -51,6 +51,10 @@
 				<view class="lf-row-between">
 					<view class="max-recomm-img">
 						<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
+						<view class="recomm-title">
+							<view class="lf-line-2">土耳其双人游飞机往返酒店五星级各大热门景点豪华双人游纯江湖救急</view>
+							<view class="lf-font-42 lf-font-bold lf-m-t-10" style="color: #FF0000;">￥3999.00</view>
+						</view>
 					</view>
 					<view>
 						<view class="recomm-img">
@@ -78,6 +82,47 @@
 				<u-tabs :list="tab_list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
 			</view>
 		</view>
+		<!-- 商品列表-瀑布流 -->
+		<view v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex" v-if="current == tabIndex" style="padding: 0 20rpx;">
+			<u-waterfall v-model="tabItem.list" :ref="'uWaterfall-'+ tabIndex">
+				<template v-slot:left="{leftList}">
+					<view class="list-warter" v-for="(item, index) in leftList" :key="index">
+						<u-lazy-load threshold="-450" :image="item.image" :index="index">
+							<view class="list-label">已售8777</view>
+						</u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.title}}
+							</view>
+							<view class="list-price">
+								<text>{{item.price}}元</text>
+								<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text>
+							</view>
+						</view>
+					</view>
+				</template>
+				<template v-slot:right="{rightList}">
+					<view class="list-warter" v-for="(item, index) in rightList" :key="index">
+						<u-lazy-load threshold="-450" :image="item.image" :index="index">
+							<view class="list-label">已售8777</view>
+						</u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.title}}
+							</view>
+							<view class="list-price">
+								<text>{{item.price}}元</text>
+								<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text>
+							</view>
+						</view>
+					</view>
+				</template>
+			</u-waterfall>
+			<u-loadmore v-if="tabItem.list.length" :status="tabItem.loading_text" @loadmore="addRandomData"></u-loadmore>
+			<lf-nocontent v-else></lf-nocontent>
+		</view>
+		<!-- 回到顶部 -->
+		<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
 	</view>
 </template>
 
@@ -109,12 +154,28 @@
 			}
 		},
 		onLoad() {
-			
+			// this.addRandomData();
 		},
 		methods: {
+			addRandomData() {
+				for(let i = 0; i < 10; i++) {
+					let index = this.$u.random(0, this.list.length - 1);
+					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
+					let item = JSON.parse(JSON.stringify(this.list[index]))
+					item.id = this.$u.guid();
+					this.flowList.push(item);
+				}
+			},
 			tabChange(current){
 				this.current = current;
+			},
+			pageChange(event){
+				console.log(event)
+				this.current = event.detail.current;
 			}
+		},
+		onReachBottom() {
+			
 		},
 		onPullDownRefresh(){
 			uni.stopPullDownRefresh();
@@ -225,6 +286,96 @@
 		.max-recomm-img{
 			width: 455rpx;
 			height: 455rpx;
+			position: relative;
+			.recomm-title{
+				// height: 142rpx;
+				height: max-content;
+				width: 100%;
+				background-color: rgba(0,0,0,0.65);
+				box-sizing: border-box;
+				padding: 15rpx;
+				position: absolute;
+				bottom: 0;
+				color: #FFFFFF;
+			}
 		}
 	}
+	
+	// ====
+	.list-warter {
+		border-radius: 8px;
+		margin: 10px 5px;
+		margin-top: 0px;
+		background-color: #ffffff;
+		// padding: 8px;
+		position: relative;
+		overflow: hidden;
+	}
+	
+	.u-close {
+		position: absolute;
+		top: 32rpx;
+		right: 32rpx;
+	}
+	
+	.list-image {
+		width: 100%;
+		border-radius: 4px;
+	}
+	
+	.list-title {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: $u-main-color;
+	}
+	
+	.list-label{
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		background-color: rgba(0,0,0,0.5);
+		width: 140rpx;
+		height: 48rpx;
+		border-radius: 20rpx 0rpx 0rpx 0rpx;
+		font-size: 22rpx;
+		color: #FFFFFF;
+		line-height: 48rpx;
+		text-align: center;
+	}
+	
+	.list-tag {
+		display: flex;
+		margin-top: 5px;
+	}
+	
+	.list-tag-owner {
+		background-color: $u-type-error;
+		color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		padding: 4rpx 14rpx;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+		line-height: 1;
+	}
+	
+	.list-tag-text {
+		border: 1px solid $u-type-primary;
+		color: $u-type-primary;
+		margin-left: 10px;
+		border-radius: 50rpx;
+		line-height: 1;
+		padding: 4rpx 14rpx;
+		display: flex;
+		align-items: center;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+	}
+	
+	.list-price {
+		font-size: 30rpx;
+		color: $u-type-error;
+		margin-top: 5px;
+	}
+	// ====
 </style>

uview-ui/components/u-lazy-load/u-lazy-load.vue

@@ -12,6 +12,7 @@
 			<image :style="{borderRadius: borderRadius + 'rpx', height: imgHeight}" class="u-lazy-item error" v-else :src="errorImg"
 			 :mode="imgMode" @load="errorImgLoaded" @tap="clickImg"></image>
 		</view>
+		<slot></slot>
 	</view>
 </template>
 
@@ -229,6 +230,7 @@
 	.u-wrap {
 		background-color: #eee;
 		overflow: hidden;
+		position: relative;
 	}
 
 	.u-lazy-item {

uview-ui/components/u-tabs/u-tabs.vue

@@ -84,7 +84,7 @@
 			// 选中项的主题颜色
 			activeColor: {
 				type: String,
-				default: '#2979ff'
+				default: '#1998FE'
 			},
 			// 未选中项的颜色
 			inactiveColor: {
@@ -230,6 +230,7 @@
 					if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
 					if (index == this.currentIndex) {
 						style.color = this.activeColor;
+						style.fontSize = '36rpx';
 						// 给选中的tab item添加外部自定义的样式
 						style = Object.assign(style, this.activeItemStyle);
 					} else {