From 6bb13c3c94298d3bb7ee42e47984aba0d6b37411 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Fri, 2 Jul 2021 11:00:44 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=E6=89=8B=E6=9C=BA=E4=BF=A1=E6=81=AF=E7=9A=84?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=EF=BC=8C=E5=B9=B6=E5=AF=BC=E5=87=BA=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=95=E5=90=84=E4=B8=AA=E9=83=A8=E4=BD=8D=E5=8F=AF=E7=94=A8?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=20[=E4=BC=98=E5=8C=96]=20=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=8F=AF=E6=BB=91=E5=8A=A8=E9=A1=B5=E9=9D=A2=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue               |  30 +++++++++++-
 pages/index/index.vue | 107 +++++++++++++++++++++++++-----------------
 2 files changed, 94 insertions(+), 43 deletions(-)

diff --git a/App.vue b/App.vue
index 8896897..e584e28 100644
--- a/App.vue
+++ b/App.vue
@@ -1,10 +1,16 @@
 <script>
 	export default {
 		globalData: {
-			wxlogin: () => {}
+			wxlogin: () => {}, // 登录方法
+			screenWidth: 0, // 屏幕宽度
+			statusBarH: 0, // 状态栏的高度
+			screenHeight: 0, // 屏幕高度
+			customBarH: 0, // 标题导航栏高度
+			windowHeight: 0, // 窗口可用高度，窗口总高度 - 状态栏的高度
 		},
 		onLaunch: function() {
 			this.disableConsole();
+			this.getSystemInfo();
 			this.getUserInfo();
 		},
 		onShow: function() {
@@ -13,6 +19,28 @@
 			// #endif
 		},
 		methods: {
+			// 获取手机设备信息
+			getSystemInfo(){
+				let res = uni.getSystemInfoSync();
+				this.globalData.screenWidth = res.screenWidth;
+				this.globalData.statusBarH = res.statusBarHeight;
+				this.globalData.screenHeight = res.screenHeight;
+				this.globalData.customBarH = res.statusBarHeight + 45;
+				this.globalData.windowHeight = res.windowHeight - (res.statusBarHeight - 20);
+				// #ifdef MP
+				setTimeout(() => {
+					let custom = uni.getMenuButtonBoundingClientRect()
+					this.globalData.customBarH = custom.bottom + custom.top - res.statusBarHeight;
+				
+					if (this.globalData.customBarH <= 0) {
+						this.globalData.customBarH = 40 + this.globalData.statusBarH;
+					}
+				}, 30);
+				// #endif 
+				// #ifdef MP-ALIPAY  
+				this.globalData.customBarH = res.statusBarHeight + res.titleBarHeight;
+				// #endif  
+			},
 			// 获取用户信息
 			getUserInfo(){
 				this.globalData.wxlogin = this.wxlogin;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 8a8a05b..32f1cf4 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -3,42 +3,46 @@
 		<view class="ctab" v-if="tab_list.length">
 			<u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
 		</view>
-		<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tab.id">
-			<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="item.id" @click="toDetail(item)">
-				<view class="left">
-					<image :src="item.cover" mode="aspectFill"></image>
-				</view>
-				<view class="right">
-					<view class="lf-line-2 title">{{ item.name }}</view>
-					<view class="lf-flex tips">
-						<view class="lf-row-between lf-flex-1" v-if="item.specs[0]">
-							<view class="lf-flex">
-								<view class="u-line-progress" v-if="item.specs[0].sold_percent">
-									<u-line-progress :percent="item.specs[0].sold_percent" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
+		<swiper :style="{height: 'calc('+ windowHeight +'px - 110rpx)', width: '750rpx'}" :current="current" @change="swiperChange">
+			<swiper-item v-for="(tab, tabIndex) in tab_list" :key="tabIndex">
+				<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
+					<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="item.id" @click="toDetail(item)">
+						<view class="left">
+							<image :src="item.cover" mode="aspectFill"></image>
+						</view>
+						<view class="right">
+							<view class="lf-line-2 title">{{ item.name }}</view>
+							<view class="lf-flex tips">
+								<view class="lf-row-between lf-flex-1" v-if="item.specs[0]">
+									<view class="lf-flex">
+										<view class="u-line-progress" v-if="item.specs[0].sold_percent">
+											<u-line-progress :percent="item.specs[0].sold_percent" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
+										</view>
+										<text class="progress lf-m-r-10">{{ item.specs[0].sold_percent_text }}</text>
+									</view>
+									<view>
+										<text class="bought">{{ item.specs[0].sold_stock_text }}</text>
+									</view>
 								</view>
-								<text class="progress lf-m-r-10">{{ item.specs[0].sold_percent_text }}</text>
 							</view>
-							<view>
-								<text class="bought">{{ item.specs[0].sold_stock_text }}</text>
+							<view class="lf-row-between price">
+								<lf-price :price="item.specs[0].selling_price" v-if="item.specs[0]"></lf-price>
+								<text class="lf-font-24 original-price" v-if="item.specs[0]">￥{{ item.specs[0].original_price }}</text>
+								<text v-else></text>
+								<button>立即抢购</button>
 							</view>
 						</view>
 					</view>
-					<view class="lf-row-between price">
-						<lf-price :price="item.specs[0].selling_price" v-if="item.specs[0]"></lf-price>
-						<text class="lf-font-24 original-price" v-if="item.specs[0]">￥{{ item.specs[0].original_price }}</text>
-						<text v-else></text>
-						<button>立即抢购</button>
+					<!-- 空数据的情况 -->
+					<view class="loading-more">
+						<text v-if="tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
+						<my-nocontent v-else></my-nocontent>
 					</view>
-				</view>
-			</view>
-			<!-- 加载 -->
-			<view class="loading-more">
-				<text v-if="tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
-				<my-nocontent v-else></my-nocontent>
-			</view>
-			<!-- 回到顶部 -->
-			<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
-		</view>
+					<!-- 回到顶部 -->
+					<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
 	</view>
 </template>
 
@@ -49,10 +53,13 @@
 				tab_list: [],
 				current: 0, // tab下表
 				pageSize: 10,
-				shareInfo: {}
+				shareInfo: {},
+				windowHeight: 0, // 屏幕可用高度
+				isRefresher: false // scroll-view下拉刷新状态，当前默认没有触发
 			}
 		},
 		onLoad() {
+			this.windowHeight = getApp().globalData.windowHeight;
 			this.getCategoryList();
 			this.getShareInfo();
 		},
@@ -70,8 +77,12 @@
 					this.getGoodsList(); // tab下没有数据，请求第一页
 				}
 			},
+			// 滑块下标值变化
+			swiperChange(event){
+				this.current = event.detail.current;
+			},
 			// 获取分类tab
-			getCategoryList(){
+			getCategoryList(options = {}){
 				this.$http(this.API.API_CATEGORY_LIST).then(res => {
 					let res_list = res.data || [];
 					let tab_list = res_list.map(item => {
@@ -85,7 +96,12 @@
 							page: 1,
 							isPage: true
 						}
-					})
+					});
+					if(options.type == 'pageRefresh'){
+						uni.stopPullDownRefresh();
+					}else if(options.type == 'scrollRefresh'){
+						this.isRefresher = false;
+					}
 					this.tab_list = tab_list;
 					this.getGoodsList();
 				})
@@ -116,18 +132,25 @@
 			// 去到详情页
 			toDetail(item){
 				this.$url('/pages/goodsDetail/index?id='+ item.id);
+			},
+			// 页面触底，加载下一页
+			onScrolltolower(){
+				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;
+				this.getCategoryList({type: 'scrollRefresh'});
 			}
 		},
-		onReachBottom(){
-			let tab_item = this.tab_list[this.current];
-			if(tab_item.isPage){
-				tab_item.page = tab_item.page + 1;
-				this.getGoodsList();
-			}
-		},
+		// page 下拉刷新
 		onPullDownRefresh(){
 			// 新版逻辑，刷新则整个数据全部重新获取
-			this.getCategoryList();
+			this.getCategoryList({type: 'pageRefresh'});
 			
 			// 旧版逻辑，刷新只刷tab下的商品列表
 			// let tab_item = this.tab_list[this.current];
@@ -136,7 +159,6 @@
 			// tab_item.loadingClass = true;
 			// tab_item.loadingText = '正在加载中';
 			// this.getGoodsList();
-			uni.stopPullDownRefresh()
 		},
 		onShareAppMessage(){
 			let shareInfo = {
@@ -169,6 +191,7 @@
 	// 商品列表
 	.com{
 		width: 100%;
+		height: 100%;
 		overflow: hidden;
 		.list{
 			border-radius: 10rpx;