newmyj/pages/eduction/list.vue

<template>
	<view class="content">
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item v-for="item in imagelist" class="carousel-item" @click="navTo(item.url)">
				<image class="imageitem" :src="item.img" />
			</swiper-item>
		</swiper>
		<view class="nav flex">
			<view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
				:class="{'action': index == currentIndex}">
				{{item.title}}
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{'height':height}" class="scroll-wrap">
			<view class="kc-item flex" v-for="item in 10">
				<image src="" mode="" class="kc-img"></image>
				<view class="kc-info">
					<view class="info-tit clamp">
						母婴行业必学舞蹈（邓晏老师视频）
					</view>
					<view class="info-cate clamp">
						技术控必练习
					</view>
					<view class="info-info flex">
						<view class="rs">
							100
						</view>
						<view class="visit">
							555555
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				height: '',
				currentIndex: 0,
				navList: [{
						title: '全部'
					}, {
						title: '视频'
					},
					{
						title: '音频'
					}
				]
			};
		},
		onLoad(opt) {

		},
		onShow() {

		},
		onReady(res) {
			var that = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scroll-wrap').boundingClientRect();
					query.exec(function(res) {
						that.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		onReachBottom() {

		},
		methods: {
			navClick(index) {
				this.currentIndex = index
			}
		}
	};
</script>
<style lang="scss" scoped>
	.top-swiper {
		margin: auto;
		width: 750rpx;
		height: 392rpx;
		padding: 0 $page-row-spacing;

		.carousel-item {
			border-radius: 20rpx;

			.imageitem {
				// margin: auto;
				width:750rpx;
				height:392rpx;
			}
		}
	}

	.nav {
		width: 750rpx;
		height: 88rpx;
		margin: 20rpx 0;
		.nav-item {
			line-height: 88rpx;
			width: 50%;
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			height: 100%;
		}

		.action {
			font-weight: bold;
			color: $base-color;
		}

		background-color: #fff;
	}
	.scroll-wrap {
		// background-color: red;
	}
	.kc-item {
		// border-bottom: #c8c7cc solid 1px;
		padding: 22rpx 0;
		justify-content: center;
		background-color: #fff;
	
		.kc-img {
			flex-shrink: 0;
			width: 266rpx;
			height: 164rpx;
			margin-right: 20rpx;
			background-color: #eee;
		}
	
		.kc-info {
			height: 164rpx;
			width: 360rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
	
			// background-color: red;
			.info-tit {
				width: 100%;
				font-size: 32rpx;
				color: #000;
			}
	
			.info-cate {
				width: 100%;
				color: #ff5a97;
				font-size: 28rpx;
			}
	
			.info-info {
				width: 360rpx;
				font-size: 24rpx;
	
				.rs {
					color: #8f8f94;
				}
	
				.visit {
					color: $base-color;
				}
			}
		}
	}
</style>