newmyj/pages/index/list.vue

<template>
	<view class="content">
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" >
			<swiper-item v-for="item in recommendList" class="carousel-item" @click="navTo('/pages/eduction/detail?id=' + item.gr_id + '&img=' + encodeURI(item.indeximg))">
				<image class="imageitem" :src="item.indeximg.indexOf('http') == -1 ? ('https://myj.liuniu946.com' +item.indeximg) : item.indeximg " />
			</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" @scrolltolower="getKcList">
			<view class="kc-item flex" v-for="item in navList[currentIndex].list" @click="navTo('/pages/eduction/detail?id=' + item.gr_id + '&img=' + encodeURI(item.indeximg))">
				<image :src="item.indeximg.indexOf('http') == -1 ? ('https://myj.liuniu946.com' +item.indeximg) : item.indeximg " mode="" class="kc-img"></image>
				<view class="kc-info">
					<view class="info-tit clamp">
						{{item.title}}
					</view>
					<view class="info-cate clamp">
						{{item.ins}}
					</view>
					<view class="info-info flex">
						<view class="rs">
							{{item.count}}
						</view>
						<view class="visit">
							{{item.alll}}
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="navList[currentIndex].loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>
<script>
	import {
		getKcList,
		recommend
	} from '@/api/index.js'
	export default {
		data() {
			return {
				recommendList: [],
				height: '',
				currentIndex: 0,
				navList: [{
						title: '全部',
						page: 1,
						pageSize: 10,
						list: [],
						loadingType: 'morde',
						loaded: false
					}, {
						title: '视频',
						page: 1,
						pageSize: 10,
						list: [],
						loadingType: 'morde',
						type: 0,
						loaded: false
					},
					{
						title: '音频',
						page: 1,
						pageSize: 10,
						list: [],
						loadingType: 'morde',
						type: 1,
						loaded: false
					}
				]
			};
		},
		onLoad(opt) {},
		onShow() {
			this.getKcList()
			this.getrecommendList()
		},
		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: {
			navTo(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			getrecommendList() {
				recommend().then(res => {
					this.recommendList = res.data.recommendList
				})
			},
			getKcList(type) {
				let that = this;
				let item = that.navList[that.currentIndex]
				if(item.loaded && type == 'tab') {
					return
				}
				if(item.loadingType == 'noMore' || item.loadingType == 'loading') {
					return
				}
				item.loadingType = 'loading'
				getKcList({
					type1: item.type,
					page: item.page,
					pageSize: item.pageSize
				}).then(res => {
					item.list = item.list.concat(res.data.grlist)
					item.page++
					if(item.pageSize == res.data.grlist.length) {
						item.loadingType = 'more'
					}else {
						item.loadingType = 'noMore'
					}
					item.loaded = true
				})
			},
			navClick(index) {
				this.currentIndex = index
				this.getKcList('tab')
			}
		}
	};
</script>
<style lang="scss" scoped>
	.top-swiper {
		margin: auto;
		width: 750rpx;
		height: 392rpx;

		.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>