From 46c082036f9e5ea9afdb2168acca6bbfc8638d2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Tue, 6 Jul 2021 15:30:40 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E6=8E=A8=E8=8D=90?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/lf-waterfall/lf-waterfall.vue | 143 +++++++++++++++++++++++
 pages.json                               |   7 ++
 pages/index/index.vue                    | 117 +------------------
 pages/recommList/index.vue               |  91 +++++++++++++++
 4 files changed, 247 insertions(+), 111 deletions(-)
 create mode 100644 components/lf-waterfall/lf-waterfall.vue
 create mode 100644 pages/recommList/index.vue

diff --git a/components/lf-waterfall/lf-waterfall.vue b/components/lf-waterfall/lf-waterfall.vue
new file mode 100644
index 0000000..93cbdce
--- /dev/null
+++ b/components/lf-waterfall/lf-waterfall.vue
@@ -0,0 +1,143 @@
+<template>
+	<view>
+		<u-waterfall v-model="list">
+			<template v-slot:left="{leftList}">
+				<view class="list-warter" v-for="(item, index) in leftList" :key="index" @click="onClick">
+					<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" @click="onClick">
+					<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>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: []
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			onClick(){
+				console.log("aaaa");
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	// ====
+	.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>
diff --git a/pages.json b/pages.json
index 4b81be7..a4431fc 100644
--- a/pages.json
+++ b/pages.json
@@ -53,6 +53,13 @@
 				"navigationBarTitleText": "专题活动",
 				"enablePullDownRefresh": true
 			}
+		},
+		{
+			"path": "pages/recommList/index",
+			"style": {
+				"navigationBarTitleText": "推荐",
+				"disableScroll": true
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index c509f51..e5df537 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -84,40 +84,7 @@
 		</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>
+			<lf-waterfall :list="tabItem.list"></lf-waterfall>
 			<u-loadmore v-if="tabItem.list.length" :status="tabItem.loading_text" @loadmore="addRandomData"></u-loadmore>
 			<lf-nocontent v-else></lf-nocontent>
 		</view>
@@ -127,7 +94,12 @@
 </template>
 
 <script>
+	import lfWaterfall from '../../components/lf-waterfall/lf-waterfall.vue';
+	
 	export default {
+		components: {
+			lfWaterfall
+		},
 		data() {
 			return {
 				banner_current: 0,
@@ -301,81 +273,4 @@
 		}
 	}
 	
-	// ====
-	.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>
diff --git a/pages/recommList/index.vue b/pages/recommList/index.vue
new file mode 100644
index 0000000..89697d9
--- /dev/null
+++ b/pages/recommList/index.vue
@@ -0,0 +1,91 @@
+<template>
+	<view>
+		<view class="lf-p-t-20 head" v-if="tab_list.length">
+			<u-tabs :list="tab_list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
+		</view>
+		<swiper :style="{height: 'calc('+ windowHeight +'px - 110rpx)', width: '750rpx'}" :current="current" @change="swiperChange">
+			<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
+				<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
+					1111
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				tab_list: [{
+					name: '推荐',
+					list: []
+				},{
+					name: '酒店',
+					list: []
+				},{
+					name: '景点',
+					list: []
+				},{
+					name: '国内游',
+					list: []
+				},{
+					name: '国际游',
+					list: []
+				},{
+					name: '跟团游',
+					list: []
+				}],
+				current: 0,
+				windowHeight: 0,
+				isRefresher: false // scroll-view下拉刷新状态，当前默认没有触发
+			}
+		},
+		onLoad(){
+			this.windowHeight = getApp().globalData.windowHeight;
+		},
+		methods: {
+			tabChange(){
+				this.current = current;
+			},
+			// 滑块下标值变化
+			swiperChange(event){
+				this.current = event.detail.current;
+				// if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
+				// if(this.tab_list[event.detail.current].list.length <= 0){
+				// 	this.getGoodsList(); // tab下没有数据，请求第一页
+				// }
+			},
+			// 页面触底，加载下一页
+			onScrolltolower(){
+				return;
+				let tab_item = this.tab_list[this.current];
+				if(tab_item.isPage){
+					tab_item.page = tab_item.page + 1;
+					this.getGoodsList();
+				}
+			},
+			// scroll-view 下拉刷新
+			onRefresherrefresh(){
+				this.isRefresher = true;
+				return;
+				this.getCategoryList({type: 'scrollRefresh'});
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+		background-color: #F6F6F6;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.head{
+		background-color: #FFFFFF;
+	}
+	.com{
+		width: 100%;
+		height: 100%;
+	}
+</style>