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 v-for="(navitem,navindex) in navList">
				<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrapper">
					<view class="list" v-for="(item,index) in navitem.list"
						@click="navTo('/pages/story/storyDetail?id=' + item.id)">
						<template v-if="index == 0">
							<view class="list-top-tit clamp2">{{item.title}}</view>
							<image :src="item.image_input[0]" mode="" class="list-top-img"></image>
							<view class="list-top-time">
								更新时间: {{item.add_time}}
							</view>
						</template>
						<template v-else>
							<view class="list-scend">
								<image :src="item.image_input[0]" mode="" class="list-img"></image>
								<view class="list-info">
									<view class="list-tit clamp">{{item.title}}</view>
									<view class="list-time">
										更新时间: {{item.add_time}}
									</view>
								</view>
							</view>
						</template>
					</view>
					<uni-load-more :status="navitem.loadingType" v-if="navitem.loaded"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		article,
		details
	} from '@/api/index.js'
	export default {
		components: {
			uniLoadMore
		},
		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: 3,
						tit: '案例分享',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more'
					}
				]
			}
		},
		onLoad() {
			this.getData('tabChange')
		},
		methods: {
			//跳转详情
			navTo(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			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';
				article({
					page: navItem.page,
					limit: navItem.limit
				}, navItem.cid).then(({
					data
				}) => {
					
					console.log(data)
					let list = data.map(item => {
						return item
					})
					navItem.list = navItem.list.concat(list);

					if (navItem.limit == 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: #fff;

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