baiyuApp/pages/expert/components/followList.vue

<template>
	<view class="container-body">
		<view id="topbox">
			<view class="es-pt-24 es-pb-24 es-pl-30 es-pr-30">
				<u-search searchIcon="/static/images/other/course/search.png" searchIconSize="15" placeholder=""
					v-model="keyword" :showAction="false" height="70rpx" bgColor="#FAFAFA"
					placeholderColor="#B4B4B4" @search="resetUpScroll"></u-search>
			</view>
			<view class="x-f es-center es-pl-24 es-pr-24 es-pt-10 es-pb-10">
				<view><text class="title">我的关注</text><text class="desc es-ml-17">{{total||0}}人</text></view>
				<view>
					<view class="desc es-fs-28 x-c" style="color: #666;"><u-icon name="list" color="#999" size="18"
							class="es-mr-10"></u-icon>最常访问</view>
				</view>
			</view>
		</view>
		<mescroll-body :height="height+'px'" @init="mescrollInit" top="0" bottom="0" :down="downOption" @down="downCallback" :up="upOption"
			 @up="upCallback">
			<view>
				<listItem type="follow" :isFollow="1" :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 { getTalentFollowByUserId} 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("#topbox")
				  .boundingClientRect((data) => {
					  if(data) {
						  this.height =  uni.getSystemInfoSync().windowHeight - data.height - data.top
					  }
				  })
				  .exec();
			},
			click(item) {
				console.log('item', item);
			},
			resetUpScroll() {
				this.mescroll.resetUpScroll()
			},
			// mescrollInit(mescroll) {
			// 	// this.mescroll = mescroll;
			// },
			// /*下拉刷新的回调 */
			// downCallback(mescroll) {
			// 	mescroll.resetUpScroll()
			// },
			/*上拉加载的回调 */
			upCallback(page) {
				//联网加载数据
				var that = this;
				var params = {"keyword":this.keyword,userId:this.userId};
				if(!this.userId){
					this.mescroll.endByPage(0, 0); 
					return
				}
				getTalentFollowByUserId(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;
		}
	}
</style>