fb/fb-app/pages/notice/index.vue

<template>
    <view class="wrap">
        <view>
        	<u-navbar title="通知公告" :is-back="false" :border-bottom="false">
        	</u-navbar>
		</view>	
		<view>
			<u-tabs-swiper ref="uTabs" :list="list"  bar-width="100" :current="current" @change="tabsChange" :is-scroll="false"
			 swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="page-box">
						<view class="weui-media-box weui-media-box_text" v-for="(noticeObj, noticeObjIndex) in noticeList[index]" :key="noticeObjIndex">
							<view class="weui-cell weui-cell-notice">
								<view class="weui-cell__bd">{{noticeObj.noticeTitle}}</view>
								<view class="weui-cell__ft">{{noticeObj.createTime}}</view>
							</view>
							<view class="weui-media-box__desc">
								<rich-text :nodes="noticeObj.noticeContent"></rich-text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
    </view>
</template>


<script>
	export default {
	    data() {
	        return {
	            list: [],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				//总和
				noticeList: [],
				ggList: [],
				tzList: [],
				// 查询参数
				queryParamsTZ: {
					pageNum: 1,
					pageSize: 10,
					noticeType: '1',
				},
				queryParamsGG: {
					pageNum: 1,
					pageSize: 10,
					noticeType: '2',
				},
				totalTZ: 0,
				totalGG: 0,
			};
	    },
	    methods: {
	        // tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				setTimeout(() => {
					if(this.current == 0){
						this.queryParamsTZ.pageNum = this.queryParamsTZ.pageNum +1;
						this.getTZ();
					}else{
						this.queryParamsGG.pageNum = this.queryParamsGG.pageNum +1;
						this.getGG();
					}
				}, 1200);
				console.log("上拉加载");
			},
			//查询通知
			getTZ() {
				//阻止翻页
				if(this.tzList.length = this.totalTZ){
					return;
				}
				this.$u.api.getNoticeList(this.queryParamsTZ).then((res) => {
					this.tzList = this.tzList.concat(res.rows);
					this.totalTZ = res.total;
					console.log("通知总页数："+res.total);
					this.noticeList[0] = this.noticeList[0].concat(this.tzList);
				})
			},
			//查询公告
			getGG() {
				//阻止翻页
				if(this.ggList.length = this.totalGG){
					return;
				}
				this.$u.api.getNoticeList(this.queryParamsGG).then((res) => {
					this.ggList = this.ggList.concat(res.rows);
					this.totalGG = res.total;
					console.log("公告总页数："+res.total);
					this.noticeList[1] = this.noticeList[1].concat(this.ggList);
				})
			},
			//初始化
			showData() {
				this.noticeList[0]=[];
				this.noticeList[1]=[];
				this.tzList=[];
				this.ggList=[];
				this.getTZ();
				this.getGG();
			}
	    },
		onShow() {
			this.list= [];
			this.showData();
			//获取通知公告类型
			this.$u.api.getNoticeType().then(({data}) => {
				 data.map(item=>{
					this.list.push({'name':item.dictLabel});
					this.current=0;
					this.tabsChange(0);
				});
			})
			
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.showData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>

	
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
	
.swiper-box {
	flex: 1;
}

.swiper-item {
	height: 100%;
}

.weui-cell-notice {
    padding-left: 0rpx;
}
</style>