wlred/pages/article/lists.vue

<template>
	<view class="list">
		<view class="nav">
			<view class="nav-item" v-for="(nav , index) in navList" :class="{'action': currentIndex == index}" @click="navClick(index)">{{nav.tit}}</view>
		</view>
		<swiper :autoplay="false" :interval="3000" :duration="500" circular class="swiper-box" :style="{'height': height}" :current="currentIndex" disable-touch>
			<swiper-item v-for="navItem in navList">
				<scroll-view scroll-y="true" @scrolltolower="getList()" :style="{'height': height}">
					<empty v-if="navItem.loaded && navItem.list.length==0"></empty>
					<view class="list-item" v-for="item in navItem.list" @click="navTo('/pages/article/detail?id=' + item.id)">
						<view class="article-tit">{{item.title}}</view>
						<view class="article-time">{{item.release_time}}</view>
					</view>
					<uni-load-more :status="navItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		getArticleList
	} from '../../api/index.js'
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				height: '',
				currentIndex: 0,
				navList: [{
						tit: '活动开展',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more',
						loaded: false,
						cid: 14,
					},
					{
						tit: '应急救护名师工作室',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more',
						loaded: false,
						cid: 15,
					},
					{
						tit: '最美红十字救护员',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more',
						loaded: false,
						cid: 16,
					},
					{
						tit: '救在身边',
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more',
						loaded: false,
						cid: 16,
					}
				],
				cid: '',
				openlink: ''
			}
		},
		onLoad(opt) {
			let obj = this
			if (opt.cid) {
				this.cid = opt.cid
				if(this.cid == 6 ) {
					this.currentIndex = 0
				}else {
					this.currentIndex = this.cid*1 - 14
				}
				
			}
			this.getList('tab')
			uni.request({
				url: 'https://sos.igxys.com/api/index/getScheme',
				data: {
					path: '/pages/index/index'
				},
				method: 'post',
				success(res){
					// console.log(res.data.data.openlink,'++++++++++++++++++++++++++')
					obj.openlink = res.data.data.openlink
				}
			})
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		methods: {
			navClick(index) {
				
				if(index == 3) {
					window.location.href = this.openlink
				}else {
					this.currentIndex = index
					this.getList('tab')
				}
				
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getList(opt) {
				let obj = this
				let index = obj.currentIndex
				let navItem = obj.navList[index]
				console.log(index,navItem)
				if(opt == 'tab' && navItem.loaded) {
					return
				}
				if (navItem.loadingType == 'loading' || navItem.loadingType == 'noMore') {
					return
				}
				navItem.loadingType = 'loading'
				getArticleList({
					page: navItem.page,
					limit: navItem.limit
				}, navItem.cid).then(({
					data
				}) => {
					console.log(data)
					navItem.list = navItem.list.concat(data.list)
					navItem.page++
					if (data.list.length == navItem.limit) {
						navItem.loadingType = 'more'
						return
					} else {
						navItem.loadingType = 'noMore'
					}
					obj.$set(navItem, 'loaded', true)
				})
			},
			//跳转到详情
			ToDetail(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/cart/personal'
					})
				}
				if (index == 2) {
					uni.navigateTo({
						url: '/pages/cart/group'
					})
				}
				if (index == 3) {
					uni.navigateTo({
						url: '/pages/form/tovolApply'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		height: 100%;
	}
	.nav {
		display: flex;
		flex-wrap: wrap;
		background-color: #df001b;
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
		.action {
			font-size: 36rpx;
			font-weight: bold;
		}
		.nav-item {
			width: 100%;
			line-height: 70rpx;
			text-align: center;
		}
	}
	.list-item {
		border-bottom: 1px solid #ccc;
		border-top: 1px solid #ccc;
		padding: 20rpx 35rpx;
		line-height: 1.5;

		.article-tit {
			font-size: 34rpx;
			color: #000000;
			font-weight: 500;
			letter-spacing: 3rpx;
		}

		.article-time {
			font-size: 28rpx;
			color: #888;
			font-weight: 500;
		}
	}

	.order-item {
		width: 100%;
		padding: 0rpx 25rpx;
		padding-top: 25rpx !important;

		.list-cell {
			background-color: #ffffff;
			border-radius: 20rpx;
			width: 100%;
			box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);

			.image {
				width: 100%;
				height: 300rpx;
				border-top-left-radius: 25rpx;
				border-top-right-radius: 25rpx;
			}

			.list-tpl {
				padding: 25rpx 25rpx;
				padding-bottom: 35rpx !important;
				font-size: 34rpx;
				color: #222222;
				font-weight: 500;
			}
		}
	}
</style>