xc/pages/user/myfans.vue

<template>
	<view class="content">
		<image class="banner" src="@/static/user/myfans/banner.png" mode="widthFix"></image>
		<view class="tabItem flex">
			<view class="list" :class="{action:acTab==0}" @click="tabChange(0)">
				我的好友
			</view>
			<view class="list" :class="{action:acTab==1}"  @click="tabChange(1)">
				间接好友
			</view>
			<view class="list" :class="{action:acTab==2}"  @click="tabChange(2)">
				其他好友
			</view>
		</view>
		<scroll-view scroll-y="true" class="swiper-box" :style="{'height':height}" @scrolltolower="getMyfans()">
			<view class="fans-list-val flex" v-for="(item,index) in itemList[acTab].list"
				:style="{'background':index%2 ==0 ? '#F9F9F9':'#fff'}">
				<view class="list-item clamp">
					{{item.real_name||item.nickname}}
				</view>
				<view class="list-item">
					{{item.uid}}
				</view>
				<view class="list-item">
					{{item.money}}
				</view>
				<view class="list-item">
					{{item.count}}
				</view>
			</view>
			<uni-load-more :status="itemList[acTab].loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getMyfans
	} from '@/api/user.js'
	export default {
		data() {
			return {
				// 选中的对象
				acTab:0,
				height: '',
				itemList: [{
					list: [{
						
					}],
					page: 1,
					limit: 10,
					loadingType: 'more',
					load:false
				}, {
					list: [],
					page: 1,
					limit: 10,
					loadingType: 'more',
					load:false
				},{
					list: [],
					page: 1,
					limit: 10,
					loadingType: 'more',
					load:false
				}]
			}
		},
		onLoad() {
			this.getMyfans();
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						// console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						// console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		methods: {
			// 切换
			tabChange(index){
				this.acTab=index;
				if(!this.itemList(index).load){
					this.getMyfans();
				}
			},
			getMyfans() {
				let that = this
				let obj = that.itemList[that.acTab];
				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
				getMyfans({
					page: obj.page,
					limit: obj.limit
				}).then(res => {
					console.log(res)
					let ar = res.data.user.map((item) => {
						if (item.real_name.length > 2) {
							let str = item.real_name.slice(1, item.real_name.length - 1);
							let str2 = str.replace(/.*/g, '*');
							item.real_name = item.real_name.slice(0, 1) + str2 + item.real_name.slice(item.real_name.length - 1);
						} else if (item.real_name.length == 2) {
							item.real_name = item.real_name.slice(0, 1) + "*";
						}
						return item
					})
					obj.list = obj.list.concat(res.data.user)
					obj.page++
					if(!obj.load){
						obj.load = true;
					}
					if (res.data.user.length == obj.limit) {
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFF;
		height: 100%;
	}

	.banner {
		width: 750rpx;

	}

	.content {
		// background-color: #f3f5f4;
	}

	.fans-list-val {
		width: 710rpx;
		height: 100rpx;
		margin: auto;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #0C1732;

		.list-item {
			width: 25%;
			flex-shrink: 0;
		}
	}
	.tabItem{
		font-weight: bold;
		font-size: 31rpx;
		color: #FFFFFF;
		margin-top: -40rpx;
		.list{
			background: rgba(51, 51, 51, .44s);
			border-radius: 20rpx 20rpx 0px 0px;
			padding: 30rpx;
			width: 240rpx;
			text-align: center;
			flex-grow: 0;
			&.action{
				background-color:rgba(51, 51, 51, 1) ;
			}
		}
	}
</style>