baiyuApp/pages/user/myFavoriteVideo.vue

<template>
	<view class="content">
		<view class="top-fixed">
			<es-nav-title title="视频收藏"  mode="fav"></es-nav-title>
			<me-tabs :value="tabIndex" :tabs="mtabs" :height="88" @change="tabChange"></me-tabs>
		</view>
		<mescroll-uni ref="mescrollRef" style="background-color: #FAFAFA;" @init="mescrollInit"  :top="mescrollTopY" bottom="0" :down="downOption" @down="downCallback" :up="upOption"
		 @up="upCallback" @emptyclick="emptyClick">
		    <view class="es-bc-fa es-p-r" >
		    	 <view class="es es-mt-10" style="flex-wrap: wrap;margin-right: -20rpx;padding: 0 24rpx;">
					 <view class="es-br-18 item" v-for="(item, index) in dataList" :key="index" @click="handleDetail(index)">
						 <image class="cover" :src="item.cover" mode="aspectFill"></image>
						 <view class="botbox es x-c">
							 <image class="es-w-20 es-h-20 es-mr-6" src="../../static/images/other/course/like.png"></image>
							 <text class="es es-c-white es-fs-24 es-fw-500">{{item.likeNum}}</text>
						 </view>
					 </view>
					 
		         </view>
			 </view>	 
	    </mescroll-uni> 
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getFavoriteVideoList } from '@/api/shortvideo'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
		    
		},
		data() {
			return {
				tabTop:0,
				mtabs:["我的喜欢","我的收藏","我的点赞"],
				downOption: {   //下拉刷新
				    use:true,
				 	auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20 // 每页数据的数量
					},
					textNoMore:"已经到底了",
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				    toTop:{
				    	width:0,
				    },
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						btnText: '刷新重试',
						icon:"/static/images/icon_img_empty.png"
					},
				},
				dataList:[],
				tabIndex:0,
				mescrollTopY:0,
			}
		},
		onLoad(options) {
			this.tabIndex = Number(options.tabIndex || 0)
			uni.$on("refreshPage",res=>{
				this.refreshPage();
			})
		},
		onUnload() {
			uni.$off("refreshPage")
		},
		mounted(option) {
			const system = uni.getSystemInfoSync();
			let navigationBarHeight=44,tabHei=110,searchBarHei=44;
		    let tempHei=navigationBarHeight+system.statusBarHeight;
			tempHei=tempHei+uni.upx2px(tabHei);
			this.mescrollTopY=tempHei+"px";
		},
		
		methods: {
			handleDetail(index) {
				const tabIndexType = this.tabIndex+1
				let curPageNum = Math.floor(index / 10) + 1
				uni.navigateTo({
					url: "/pages/user/myliving-app?tabIndexType="+tabIndexType+"&k="+index+'&curPageNum='+curPageNum
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.refreshPage();
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				let params={"type":this.tabIndex+1};
				getFavoriteVideoList(params,page.num,page.size).then(res => {
					   
						if(res.code==200){
							setTimeout(()=>{
								this.mescroll.endByPage(res.data.list.length, res.data.pages);
								if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
								this.dataList=this.dataList.concat(res.data.list); //追加新数据
								this.totalNum=res.data.total;
							},300);
							
						}else{
							this.dataList= []; //追加新数据
							this.totalNum= 0
							this.mescroll.endByPage(0, 1); 
						}
					},
					rej => {}
				).catch(()=>{
					this.dataList= []; //追加新数据
					this.totalNum= 0
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
				
			},
			refreshPage(){  
			    this.mescroll.hideTopBtn();
			    this.mescroll.resetUpScroll(true);
			},
					
			tabChange(index){
				console.log("qxj tabChange");
				this.tabIndex=index;
				this.refreshPage();
				
			},
			
			//点击空布局按钮的回调
			emptyClick() {
				this.refreshPage();
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	page{
		// height: 100%;
		background-color: #f7f7f7;
	}
	.top-fixed{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		height: 88upx;
		background-color: #fff;
	}
	.sticky-tabs{
		z-index: 11;
		width: 100%;
		left: 0;
		position: fixed;
		top: 88rpx;
		background-color: #fff;
		height: 88rpx;
		align-items: center;
	}
	
	.item{
		border-radius: 18rpx;
		width: calc(33% - 20rpx);
		height:290rpx ;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		.cover{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		.botbox{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 38rpx;
			background: rgba(0,0,0, 0.3);
			border-radius: 10rpx;
		}
		
	}
	

</style>