uniapp-shikongwang/pages/center/fans.vue

<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="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>

		<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="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>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0, // tab下标
				pageSize: 10,
				isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发
				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 = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			// 页面触底，加载下一页
			onScrolltolower(){
				console.log('加载下一页')
			},
			// scroll-view 下拉刷新
			onRefresherrefresh(){
				this.isRefresher = true;
				console.log('下拉刷新')
				setTimeout(() => {
					this.isRefresher = false;
				},1000)
			}
		}
	}
</script>

<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>