zhengyi/pages/story/story.vue

<template>
	<view class="content">
		<!-- 头部导航 -->
		<view class="nav-bar flex">
			<view class="nav-item" v-for="(item,index) in navList" :key="index"
				:class="{'active': currentIndex == index}" @click="navClick(index)">
				{{item.tit}}
			</view>
		</view>
		<!-- 分类列表 -->
		<swiper :duration="400" class="swiper-wrapper" :style="{'height': height}" :current="currentIndex" @change="swiperChange">
			<swiper-item>
				<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrapper">
					<view class="list" v-for="(item,index) in 100">
						<template v-if="index == 0">
							<view class="list-top-tit clamp2">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
							<image src="" mode="" class="list-top-img"></image>
							<view class="list-top-time">
								更新时间:2019-12-06
							</view>
						</template>
						<template v-else>
							<view class="list-scend">
								<image src="" mode="" class="list-img"></image>
								<view class="list-info">
									<view class="list-tit clamp">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
									<view class="list-time">
										更新时间:2019-12-06
									</view>
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrapper">
					<view class="list" v-for="(item,index) in 100">
						<template v-if="index == 0">
							<view class="list-top-tit clamp2">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
							<image src="" mode="" class="list-top-img"></image>
							<view class="list-top-time">
								更新时间:2019-12-06
							</view>
						</template>
						<template v-else>
							<view class="list-scend">
								<image src="" mode="" class="list-img"></image>
								<view class="list-info">
									<view class="list-tit clamp">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
									<view class="list-time">
										更新时间:2019-12-06
									</view>
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrapper">
					<view class="list" v-for="(item,index) in 100">
						<template v-if="index == 0">
							<view class="list-top-tit clamp2">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
							<image src="" mode="" class="list-top-img"></image>
							<view class="list-top-time">
								更新时间:2019-12-06
							</view>
						</template>
						<template v-else>
							<view class="list-scend">
								<image src="" mode="" class="list-img"></image>
								<view class="list-info">
									<view class="list-tit clamp">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
									<view class="list-time">
										更新时间:2019-12-06
									</view>
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		components: {

		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-wrapper').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		data() {
			return {
				height: '', //swiper 高度
				currentIndex: 0, //当前头部导航位置
				navList: [{
						cid: 1,
						tit: '公司简介',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more'
					},
					{
						cid: 2,
						tit: '产品简介',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more'
					},
					{
						cid: 1,
						tit: '案例分享',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more'
					}
				]
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			navClick(index) {
				this.currentIndex = index
			},
			swiperChange(e) {
				console.log(e,'swiperChange')
				this.currentIndex = e.detail.current
				this.getData('tabChange')
			},
			getData(source) {
				let obj = this
				let index = this.currentIndex;
				let navItem = this.navList[index];
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				navItem.loadingType = 'loading';
				getCricleList({
					page: navItem.page,
					limit: navItem.limit
				}).then(({data}) => {
					console.log(res)
					let list = data.list.map( item => {
						return item
					})
					navItem.list = navItem.list.concat(list);
					console.log(arr);
					
					if (navItem.limit == data.list.data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'more';
						navItem.page++;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'noMore';
					}
					this.$set(navItem, 'loaded', true);
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #eee;
		padding-top: 20rpx;
	}

	.content {
		height: 100%;

		background-color: #fff;

		.nav-bar {
			line-height: 86rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			justify-content: space-around;
			border-bottom: #E0E0E0 1px solid;

			.active {
				color: #3F7C1F;
				border-bottom: 3rpx solid #3F7C1F;
			}

			.nav-item {
				// flex-grow: 1;
				text-align: center;
			}
		}
	}

	.swiper-wrapper {
		background-color: #eee;
	
		.scroll-wrapper {
				padding: 0 22rpx 0 23rpx;
		}
		.list {
			padding: 18rpx 0;
			border-bottom: 1px solid #E0E0E0;
			.list-top-tit {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 42rpx;
			}

			.list-top-img {
				margin-top: 15rpx;
				width: 705rpx;
				height: 399rpx;
				background-color: #999;
			}

			.list-top-time {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 32rpx;
			}
			
			.list-scend {
				display: flex;
				.list-img {
					flex-shrink: 0;
					background-color: #999;
					width: 224rpx;
					height: 160rpx;
				}
				.list-info {
					padding:10rpx 0 19rpx 23rpx;
					position: relative;
					.list-tit {
						width: 420rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 32px;
					}
					.list-time {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 32rpx;
						position: absolute;
						bottom: 19rpx;
					}
				}
				
			}
		}
	}
</style>