siyu_app/pages/course/famousHallPageItem.vue

<template>
	
	<view  class="item_content">
		
		<view class="cate-list">
		    <!-- 关键字列表 -->
			<scroll-view   scroll-x="true" >
				<view class="inner">
					<view v-for="(item,index) in cates" :key="index" :class="subCateId == item.dictValue?'item active':'item'" @click="choseCate(item)">
						{{ item.dictLabel }}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<mescroll-uni :ref="'mescrollRef'+i"  @init="mescrollInit" style="background-color: #fff;" :disable-scroll="disableScroll"  top="80"  bottom="0"  :down="downOption" :up="upOption"   @down="downCallback"
		 @up="upCallback" @emptyclick="emptyClick">
			<view class="myjt-box">
					 <view  class="item" v-for="(item,index) in dataList"  @click="$navTo('./info?courseId='+item.courseId)" :key="index">
							<view class="img-box">
								<image class="image" :src="item.imgUrl" mode="scaleToFill"></image>
								<view class="playIcon x-c">
									<image src="../../static/image/course/play_icon.png"></image>
								</view>
								<view class="vip">VIP</view>
								<view class="x-f es-h-44" style="position: absolute;bottom: 0;width: 100%;">
									<image class="es-w-24 es-h-24 es-ml-10 es-mr-8" src="../../static/image/course/play.png"></image>
									<text class="es-c-white es-fw-400 es-fs-22">{{item.views}}</text>
								</view>
							</view>
							<view class="info-box">
								<view class="title ellipsis2">{{item.courseName}}</view>
							</view>
					 </view>			 
			 </view> 
		</mescroll-uni>
	</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 { getCourseCate,getCourseList,getProductCateByPid } from '@/api/course'
	export default {
		mixins: [ MescrollMixin,MescrollMoreItemMixin ], 
		components: {
			
		},
		props: {
			cataType:Number,
			i:Number,
			index:Number,
			itemData: {
				type: Object,
				default() {
					return { };
				}
			},
			tipsArr: {
				type: Array,
				default(){
					return []
				}
			},
			disableScroll: Boolean // 是否禁止滚动, 默认false
		},
		watch:{
			
		},
		data() {
			return {
				bottomBlackLineHeight: uni.getStorageSync('bottomBlackLineHeight'),
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					textNoMore:"已经到底了",
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				    toTop:{
				    	width:0,
				    },
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						btnText: '刷新重试',
						icon:"/static/images/icon_img_empty.png"
					},
				},
				cateId:null,
				subCateId:null,
				tabs:[],
				dataList: [] ,//列表数据
				cates:[],
				keyword:"",
				isBest:false,
			    sorCates:[{"dictLabel": "全部","dictValue":0}]
			}
		},
		mounted() {
			
		
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll(true);
			},
			/*上拉加载的回调 */
			upCallback(page) {
				var that = this;
				let params={};
				if(this.isBest){
					params={"isBest":1};
				}else{
					params={"cateId":this.cateId};
				}
				
				if(this.subCateId!=null && this.subCateId!=0){
					params['subCateId']=this.subCateId;
				}
				if(!this.$isEmpty(this.keyword)){
					params['keyword']=this.keyword;
				}
				getCourseList(params,page.num).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); //追加新数据
							},400);
							
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
							that.dataList = null;
							that.mescroll.endErr();
						}
					},
					rej => {}
				);
			},
			//点击空布局按钮的回调
			emptyClick() {
				
			},
		   refreshPage(){
			   this.mescroll.hideTopBtn();
			   this.mescroll.resetUpScroll(true);
		   },
		   getProductCateByPid(){
			   if(this.isBest){
				   this.cates = this.sorCates;
				   this.subCateId=0;
				   return;
			   }
			   getProductCateByPid(this.cateId).then(res => {
			   		if(res.code==200){
			   			this.cates=this.sorCates.concat(res.data);
						this.subCateId=this.cates[0].dictValue;
						this.refreshPage();
			   		}else{
			   			this.cates = this.sorCates;
			   		}
			   	},
			   	rej => {}
			   );
			   			
		   },
		   
		   choseCate(item){
				this.subCateId = item.dictValue;
				this.refreshPage();
		   },
		   // 页面的滚动事件
		   onPageScroll(e){
		      console.log("qxj disableScroll:"+disableScroll);
		   }
		},
		created(){
			let that = this;
			uni.$on('refreshFollowLog', function(data){
				//that.refreshPage();
				that.$emit('resetUpScroll');
			});
		},
		destroyed() {
			// 注销全局配置监听
			uni.$off("refreshFollowLog")
		}
	}


</script>



<style lang="scss" scoped>
	
	.item_content{
		background-color: #fff;
	}
	
	.cate-list{
		box-sizing: border-box;
		background: #fff;
		padding:20rpx 20rpx;
		padding-top: 20rpx;
		padding-bottom: 0;
		height: 100rpx;
		.inner{
			display: flex;
		}
		.item{
			flex-shrink: 0;
			padding: 0 24rpx;
			margin-right: 16rpx;
			height: 56rpx;
			line-height: 50rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: normal;
			color: #666666;
			background: #fff;
			border: 0px solid #EEEEEE;
			line-height: 54rpx;
			background: #eeeeee;
			
			border-radius: 32rpx;
			&.active{
				color: #FF6600;
				background: #FDEEE7;
				border: 1px solid #FF6600;
				
			}
		}
	}
		
	.myjt-box{
		  display: flex;
		  flex-wrap: wrap;
		  border-radius: 8rpx;
		  margin: 0 16rpx;
		  margin-top:20rpx;
	      .item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: calc(50%);
				margin-bottom: 26rpx;
				.img-box{
					  position: relative;
					  width: 95%; /* 或者任何你想要的宽度 */
					  padding-bottom: 58%; /* 高度等于宽度 */
					  overflow: hidden; /* 防止图片溢出 */
					  .image{
							position: absolute;
							max-width: 100%;
							max-height: 100%;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							border-radius: 12rpx;
					  }
				}
				.playIcon{
						 position: absolute;
						 width: 69rpx;
						 height: 69rpx;
						 background: rgba(0, 0, 0, 0.28);
						 border-radius: 50%;
						 top: 50%;
						 left: 50%;
						 transform: translate(-50%, -50%);
						 image{
							 width:28rpx ;
							 height: 32rpx;
							 border-radius: 0;
						 }
				 }
				 .vip{
						  position: absolute;
						  width: 49rpx;
						  height: 28rpx;
						  background: linear-gradient(94deg, #FFE9D0 0%, #E9BD97 100%);
						  border-radius: 6rpx;
						  top: 16rpx;
						  right: 16rpx;
						  color:#333;
						  font-size:18rpx ;
						  text-align: center;
						  font-weight: 500;
						  font-style: italic;		  
				 }
							
				.info-box{
						width: calc(100% - 20upx);
						.title{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 470;
							color: #333;
							line-height: 40rpx;
							max-height: 80rpx;
							margin-top: 14rpx;
						}
				}
		  }
		  
		  
	}		
	
	.mescroll-uni-fixed{
		 background-color: #fff !important;
	}
	
</style>