From adb72805be63e0f587ea864bfd7211f0641dd52d 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, 9 Jul 2021 15:59:54 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BC=98=E5=8C=96]=20=E7=B2=89=E4=B8=9D?=
 =?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

---
 pages.json            |  3 +-
 pages/center/fans.vue | 99 +++++++++++++++++++++++--------------------
 2 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/pages.json b/pages.json
index ea1b296..fbc25e2 100644
--- a/pages.json
+++ b/pages.json
@@ -93,7 +93,8 @@
 		{
 			"path": "pages/center/fans",
 			"style": {
-				"navigationBarTitleText": "粉丝列表"
+				"navigationBarTitleText": "粉丝列表",
+				"disableScroll": true
 			}
 		},
 		{
diff --git a/pages/center/fans.vue b/pages/center/fans.vue
index da35103..45d7ef0 100644
--- a/pages/center/fans.vue
+++ b/pages/center/fans.vue
@@ -1,50 +1,35 @@
 <template>
 	<view>
 		<view class="bg-white lf-p-t-40 lf-p-b-40 flex justify-around align-center text-center solid-bottom">
-			<view class="lf-font-32" style="width: 50%;border-right: 1px solid rgba(0, 0, 0, 0.1);box-sizing: border-box;" :class="tabIndex ==0?'text-orange':'text-black1'" @click="tabIndex = 0">内部粉丝</view>
-			<view class="lf-font-32" style="width: 50%;" :class="tabIndex ==1?'text-orange':'text-black1'" @click="tabIndex = 1">外部粉丝</view>
+			<view class="tab-item" 
+				:class="current==index?'text-orange':'text-black1'" 
+				v-for="(item, index) in tab_list" :key="index" 
+				@click="current = index">{{ item.name }}
+			</view>
 		</view>
 		
-		<block v-if="tabIndex == 0">
-			<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
-				<view class="flex lf-p-30 solid-bottom" v-for="i of 15">
-					<view>
-						<image src="../../static/center/shop-logo.png" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image>
-					</view>
-					<view class="flex flex-direction justify-around lf-p-l-20">
-						<view class="lf-font-32 text-black1">时空网的内部网友 <text class="bg-red lf-font-24 lf-m-l-10" style="border-radius: 30rpx;padding: 5rpx 16rpx;">达人</text></view>
-						<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</view>
-					</view>
+		<scroll-view :style="{height: 'calc('+ windowHeight +'px - 120rpx)'}"
+			:scroll-y="true" :refresher-enabled="true" 
+			:refresher-triggered="isRefresher" 
+			@scrolltolower="onScrolltolower" 
+			@refresherrefresh="onRefresherrefresh"
+			v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex"
+			v-if="tabIndex == current">
+			<view class="flex lf-p-30 solid-bottom" v-for="(item, index) in tabItem.list" :key="index">
+				<view>
+					<image src="../../static/center/shop-logo.png" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image>
 				</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 class="flex flex-direction justify-around lf-p-l-20">
+					<view class="lf-font-32 text-black1">时空网的内部网友 <text class="bg-red lf-font-24 lf-m-l-10" style="border-radius: 30rpx;padding: 5rpx 16rpx;">达人</text></view>
+					<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</view>
 				</view>
-				<!-- 回到顶部 -->
-				<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
-			</scroll-view>
-		</block>
-		<block v-else>
-			<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
-				<view class="flex lf-p-30 solid-bottom"  v-for="i of 15">
-					<view>
-						<image src="../../static/center/shop-logo.png" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image>
-					</view>
-					<view class="flex flex-direction justify-around lf-p-l-20">
-						<view class="lf-font-32 text-black1">时空网的外部网友</view>
-						<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</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>
-			</scroll-view>
-		</block>
+			</view>
+			<!-- 加载 -->
+			<view class="loading-more">
+				<text v-if="tabItem.list.length" :class="{'loading-more-text': tabItem.loadingClass}">{{ tabItem.loadingText }}</text>
+				<my-nocontent v-else></my-nocontent>
+			</view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -52,13 +37,30 @@
 	export default {
 		data() {
 			return {
-				tabIndex: 0,
+				current: 0, // tab下标
 				pageSize: 10,
 				isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发
-				page: 1,
-				isPage: false
+				windowHeight: 0,
+				tab_list: [{
+					name: '内部粉丝',
+					list: [1],
+					page: 1,
+					isPage: false,
+					loadingClass: false,
+					loadingText: '已加载全部数据'
+				},{
+					name: '外部粉丝',
+					list: [1,2,3,4,5,6,7,8,9],
+					page: 1,
+					isPage: false,
+					loadingClass: true,
+					loadingText: '正在加载中'
+				}]
 			}
 		},
+		onLoad(){
+			this.windowHeight = getApp().globalData.windowHeight;
+		},
 		methods: {
 			// 页面触底，加载下一页
 			onScrolltolower(){
@@ -76,8 +78,13 @@
 	}
 </script>
 
-<style>
-	.com {
-		height: 1300rpx;
+<style lang="scss" scoped>
+	.tab-item{
+		width: 50%;
+		box-sizing: border-box;
+		font-size: 32rpx;
+		&:first-child{
+			border-right: 2rpx solid rgba(0, 0, 0, 0.1);
+		}
 	}
 </style>