mz/pages/live/list.vue

<template>
	<view class="container">
		<scroll-view class="scroll-list" scroll-x>
			<view class="scoll-box" v-for="ls in Recommendlist" :class="{ active: ls.id === currentId }" @click="tabtap(ls.id)">
				<view class="scoll-name">{{ ls.title }}</view>
			</view>
		</scroll-view>
		<view id="list-box" class="list-box" :style="{ height: swiperHeight + 'px' }">
			<view class="guess-section">
				<view v-if="list.length ==  0" class="no-data">暂无数据</view>
				<view v-for="(item, index) in list" class="guess-item" @click="ToDetail(item)">
					<view class="imagewrapper">
						<image :src="item.image"></image>
						<!-- <view class="type flex"><view class="tip"></view>直播中</view> -->
					</view>
					<view class="info">
						<view class="title ellipsis">{{item.title}}</view>
						<view class="flex name-item">
							<view class="name">{{item.abstract}}</view>
							<view class="tip-box flex">
								<image src="../../static/img/eay.png"></image>
								<view class="number">{{item.browse_count}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { unified,GetUnifiend } from '@/api/course.js';
export default {
	data() {
		return {
			page:1,
			limit:100,
			list:'',
			swiperHeight:0,
			type:'',//分类类型
			id:'',//分类id
			title:'',//分类标题
			Recommendlist:'',//分类列表
			currentId:0,
			typesetting:'',
		};
	},
	watch:{
		// 初次加载页面高度时修改页面高度
		list(newValue, oldValue) {
			let obj = this;
			let bHeight = Math.ceil(newValue.length / 2);
			obj.$nextTick(function() {
				uni.createSelectorQuery()
					.select('#list-box')
					.fields(
						{
							size: true
						},
						function(data) {
							obj.pageProportion = data.width / 750;
							obj.swiperHeight = Math.ceil(obj.pageProportion * 450 * bHeight);
						}
					)
					.exec();
			});
		}
	},
	onLoad(option) {
		this.id = option.recommend_id;
		this.type = option.type;
		this.title = option.title;
		this.typesetting = option.typesetting;
		this.loadData();
		this.listDate();
	},
	methods: {
		//加载分类列表
		listDate(){
			let obj = this;
			unified({
				type: obj.type,
				title: obj.title,
				recommend_id:obj.id
			})
				.then(data => {
					obj.Recommendlist =  data.data.Recommendlist;
					let newDate = {
						id: 0,
						title: '推荐'
					};
					obj.Recommendlist.unshift(newDate);
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		//加载专题列表
		loadData() {
			let obj = this;
			GetUnifiend({
				page: obj.page,
				limit: obj.limit,
				recommend_id:obj.id,
				type:obj.type,
				typesetting:obj.typesetting,
				subject_id:obj.currentId
			})
				.then(data => {
					obj.list = data.data.list;
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		//头部导航栏点击事件
		tabtap(item) {
			this.currentId = item;
			this.loadData();
		},
		ToDetail(item){
			uni.navigateTo({
				url: '/pages/live/details?id='+item.link_id
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background-color: #F8F6F6;
	}
	.container{
		width: 100%;
		height: 100%;
		background-color: #F8F6F6;
		
	}
	.scroll-list {
		width:100%;
		height: 70rpx;
		overflow: hidden;
		white-space: nowrap;
		padding: 0rpx 25rpx;
		font-size: 26rpx;
		background-color: #FFFFFF;
		margin-bottom: 25rpx;
		line-height: 60rpx;
		.scoll-box {
			margin-right: 35rpx;
			text-align: center;
			display: inline-block;
			.scoll-name {
				// margin-left: 25rpx;
			}
			&.active {
				color: #fa2740;
				border-bottom: 4rpx solid #fa2740;
			}
		}
	}
	/* 猜你喜欢 */
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
		.no-data{
			width: 100%;
			font-size: 26rpx;
			text-align: center;
		}
		.guess-item {
			// height: 558rpx;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			border: 2rpx solid #eeeeee;
			width: 343rpx;
			margin-bottom: 4%;
			border-radius: $border-radius-sm;
			background-color: white;
			padding-bottom: 30rpx;
			&:nth-child(2n + 1) {
				margin-right: 24rpx;
			}
		}
		.imagewrapper {
			width: 100%;
			height: 289rpx;
			border-radius: 3px;
			margin-bottom: 15rpx;
			image {
				width: 100%;
				height: 100%;
				// opacity: 1;
			}
		}
		.type{
			position: absolute;
			top: 25rpx;
			right: 25rpx;
			font-size: 20rpx;
			background:rgba(62,62,62,0.5);
			padding: 5rpx 10rpx;
			color: #FFFFFF;
			.tip{
				width: 15rpx;
				height: 15rpx;
				border-radius: 100%;
				margin-right: 15rpx;
				background-color: #65D955;
			}
		}
		.info{
			padding:0rpx 25rpx;
			font-size: 26rpx;
			.title{
				
			}
			.name-item{
				padding-top: 15rpx;
				font-size: 24rpx;
				.name{
					
				}
				.tip-box{
					font-size: 22rpx;
					color: #999999;
					image{
						width: 50rpx;
						height: 45rpx;
					}
				}
			}
		}
	}
</style>