heshanApp/pages/expert/components/fansList.vue

<template>
	<view class="container-body">
		<view id='topbox2' class="fans x-f desc es-pl-30 es-pr-30 es-pt-24 es-pb-24">
			共<text class="es-ml-10 es-mr-10" style="color: #333333;">{{total||0}}</text>个粉丝
		</view>
		<mescroll-body :height="height+'px'" @init="mescrollInit" top="0" bottom="0" :down="downOption" @down="downCallback" :up="upOption"
			 @up="upCallback">
			<view>
				<listItem type="fans" :isFollow="item.isFollow" :item="item" v-for="item in dataList" :key="item.talentId" @resetData="resetUpScroll"></listItem>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import listItem from "./listItem.vue"
	import { getTalentFansByUserId} from "@/api/expert.js"
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin],
		props: {
			cataType:Number,
			i:Number,
			index:Number,
			itemData: {
				type: Object,
				default() {
					return { };
				}
			},
		},
		components: {
			listItem
		},
		data() {
			return {
				height: 0,
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore:"",
					toTop:{
				    	width:0,
				    }
				},
				keyword:"",
				dataList: [], //列表数据
				userId:"",
				total: 0
			}
		},
		methods: {
			initHeight() {
				const query = uni.createSelectorQuery().in(this);
				query
				  .select("#topbox2")
				  .boundingClientRect((data) => {
					   console.log(JSON.stringify(data))
					  if(data) {
						  this.height =  uni.getSystemInfoSync().windowHeight - data.height - data.top
						  console.log(this.height)
					  }
				  })
				  .exec();
			},
			click(item) {
				console.log('item', item);
			},
			resetUpScroll() {
				this.mescroll.resetUpScroll()
			},
			// /*下拉刷新的回调 */
			// downCallback(mescroll) {
			// 	mescroll.resetUpScroll()
			// },
			/*上拉加载的回调 */
			upCallback(page) {
				//联网加载数据
				var that = this;
				var params = {"keyword":this.keyword,talentId:this.userId};
				if(!this.userId){
					this.mescroll.endByPage(0, 0); 
					return
				} 
				getTalentFansByUserId(params,page.num).then(res => {
					if(res.code==200){
						//设置列表数据
						if (page.num == 1) {
							that.dataList = res.rows; 
							
						} else {
							that.dataList = that.dataList.concat(res.rows);
							 
						}
						that.total = res.total
						that.mescroll.endBySize(res.rows.length, res.total);
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container-body {
		position: relative;
		background-color: #fff;
		font-family: MiSans;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	
		.title {
			font-weight: 600;
		}
	
		.desc {
			font-size: 24rpx;
			color: #999999;
		}
	}
	.fans {
		border-bottom: 1rpx solid #EEEEEE;
	}
</style>