[优化] 首页滑动切换tab多请求了一次接口

[优化] 用户订单列表增加滑动page切换tab的能力

pages/index/index.vue

@@ -80,6 +80,10 @@
 			// 滑块下标值变化
 			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下没有数据，请求第一页
+				}
 			},
 			// 获取分类tab
 			getCategoryList(options = {}){

pages/order/index.vue

@@ -4,7 +4,9 @@
 		<view class="padding-lr" style="margin-bottom: 10rpx;margin-top: 20rpx;">
 			<me-tabs v-model="current" :tabs="tab_list" :fixed="true" @change="change"></me-tabs>
 		</view>
-		<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tab.id">
+		<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="flex-direction justify-around list" v-for="(item, index) in tab.list" :key="item.id" @tap="goDetails(tabIndex,index)">
 						<view class="lf-row-between">
 							<view class="left" style="position: relative;display: flex;">
@@ -36,7 +38,7 @@
 							</view>
 						</view>
 					</view>
-			<!-- 加载 -->
+					<!-- 空数据的情况 -->
 					<view class="loading-more">
 						<text v-if="tab.list.length"
 							:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
@@ -44,7 +46,9 @@
 					</view>
 					<!-- 回到顶部 -->
 					<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
-		</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
 	</view>
 </template>
 
@@ -100,10 +104,13 @@
 				pageSize: 10,
 				assetsType: '', //账户类型
 				orderType: [],
-				showLogin: true
+				showLogin: true,
+				windowHeight: 0, // 屏幕可用高度
+				isRefresher: false // scroll-view下拉刷新状态，当前默认没有触发
 			}
 		},
 		onLoad(e) {
+			this.windowHeight = getApp().globalData.windowHeight;
 			this.assetsType = e.type;
 		},
 		onShow() {
@@ -134,6 +141,12 @@
 				this.current = index;
 				this.getUserOrder();
 			},
+			// 滑块下标值变化
+			swiperChange(event){
+				this.current = event.detail.current;
+				if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
+				this.getUserOrder();
+			},
 			goDetails(tabIndex,index) {
 				console.log(tabIndex,index)
 				let item = this.tab_list[tabIndex].list[index]
@@ -146,23 +159,8 @@
 				}
 
 			},
-			onReachBottom() {
-				let tab_item = this.tab_list[this.current];
-				if (tab_item.isPage) {
-					tab_item.page = tab_item.page + 1;
-					this.getUserOrder();
-				}
-			},
-			onPullDownRefresh() {
-				let tab_item = this.tab_list[this.current];
-				tab_item.page = 1;
-				tab_item.isPage = true;
-				tab_item.loadingClass = true;
-				tab_item.loadingText = '正在加载中';
-				this.getUserOrder();
-				uni.stopPullDownRefresh()
-			},
-			getUserOrder() {
+			
+			getUserOrder(options = {}) {
 				let per_page = this.pageSize;
 				let tab_item = this.tab_list[this.current];
 				this.$http(this.API.API_USERORDER, {
@@ -170,57 +168,54 @@
 					page: tab_item.page,
 					per_page
 				}).then(res => {
-					if (res.code == 0) {
-						console.log(res)
 					if( Object.keys(res.metal_data).length != 0 ) {
 						this.$routerGo('/pages/login/index?type=userinfo')
 					}else {
 						let isPage = res.data.has_more_page;
 						tab_item.isPage = isPage;
-							if (isPage) {
-								tab_item.loadingClass = true;
-								tab_item.loadingText = '正在加载中';
-							} else {
+						if (!isPage) {
 							tab_item.loadingClass = false;
 							tab_item.loadingText = '没有更多数据啦~';
 						}
+						if(options.type == 'pageRefresh'){
+							uni.stopPullDownRefresh();
+						}else if(options.type == 'scrollRefresh'){
+							this.isRefresher = false;
+						}
 						if (tab_item.page == 1) {
 							tab_item.list = res.data.items;
 						} else {
 							tab_item.list.push(...res.data.items);
 						}
 					}
-					}
-
-				}).catch(err => {
-
-				});
+				})
 			},
-			//返回
-			back() {
-				if (this.assetsType === 'all2') {
-					// #ifdef H5
-					window.history.go(-2)
-					// #endif
-
-					// #ifndef H5
-					uni.navigateBack({
-						delta: 2
-					});
-					// #endif
-				} else {
-					// #ifdef H5
-					window.history.go(-1)
-					// #endif
-
-					// #ifndef H5
-					uni.navigateBack({
-						delta: 1
-					});
-					// #endif
+			// 页面触底，加载下一页
+			onScrolltolower(){
+				let tab_item = this.tab_list[this.current];
+				if(tab_item.isPage){
+					tab_item.page = tab_item.page + 1;
+					this.getUserOrder();
 				}
+			},
+			// scroll-view 下拉刷新
+			onRefresherrefresh(){
+				this.isRefresher = true;
+				this.refreshFn({type: 'scrollRefresh'});
+			},
+			// 下拉刷新处理
+			refreshFn(options){
+				let tab_item = this.tab_list[this.current];
+				tab_item.page = 1;
+				tab_item.isPage = true;
+				tab_item.loadingClass = true;
+				tab_item.loadingText = '正在加载中';
+				this.getUserOrder(options);
 			}
 		},
+		onPullDownRefresh() {
+			this.refreshFn({type: 'pageRefresh'});
+		}
 	}
 </script>