czga-mobile/components/menubar/menubar.vue

<template>
	<view class="menubar">
		<view class="tabwrap">
			<u-tabs-swiper ref="uTabs" 
			:list="list" 
			:current="current" 
			:inactive-color="tabscon.inactiveColor"
			:active-color="tabscon.activeColor"
			:font-size="tabscon.fontSize"
			:show-bar="false"
			:height="tabscon.height"
			:active-item-style="tabscon.activeItemStyle"
			@change="tabsChange" 
			:is-scroll="true"
			 swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper style="height: 1000rpx;width: 100%;padding-bottom:200rpx" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<!-- <u-empty v-if="tabsdata.length==0" text="" mode="list"></u-empty> -->
				<swiper-item class="swiper-item" v-for="(itemList, index) in tabsdata" :key="index">
					<scroll-view class="list" scroll-y  @scrolltolower="onreachBottom">
						<view style="height: 1000rpx;" v-if="itemList.length==0" class="">
							<u-empty text="暂无数据" mode="list"></u-empty>
						</view>
						<view v-else>
							<view v-for="(item,indexkey) in itemList" :key="indexkey">
								
								<view class="listitem u-body-item u-border-bottom u-col-between u-p-t-0">
									<view class="titles">
										<view class="u-body-item-title u-line-2">{{item.title}}</view>
										<view class="times">{{item.times}}</view>
									</view>
									<image v-if="current==0" width="100%" :src="item.imgs" mode=""></image>							
								</view>
							</view>
						</view>
						
					</scroll-view>
				</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props:{
			tabs:{
				type: Array,
				default: ()=>[[],[],[],[],[],[]]
			},
			currentPage:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				tabscon:{
					inactiveColor:"#BEBDBD",
					activeColor:"#DE242F",
					fontSize:"32",
					height:"100",
					activeItemStyle:{
						borderBottom:"2px solid #DE242F",
						fontSize:"36rpx",
						lineHeight:"98rpx"
					}
					
					
				},
				list: [{
					name: '图片新闻'
				}, {
					name: '综合新闻'
				}, {
					name: '各地警讯'
				}, {
					name: '机关动态'
				}, {
					name: '好警纪实'
				}, {
					name: '警营文化'
				}],
				tabsdata : [],
				// tabs:["111","222","333","444","555","666"],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			};
		},
		mounted(){
			this.current = this.currentPage
			this.tabsdata = this.tabs
			this.swiperCurrent = this.currentPage;
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.tabsdata = this.tabs
			},
			// 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.swiperCurrent = current;
				this.current = current;
				
				this.$refs.uTabs.setFinishCurrent(current);
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			}
		}
	};
</script>
<style scoped>
	.menubar{
		padding-top: 40rpx;
		background: #fff;
	}
	.tabwrap{
				box-shadow: 0px 0px 10px 0px rgba(98, 96, 96, 0.5)!important;
	}
	/deep/ .u-tabs-item{
		border-bottom:2px solid #BEBDBD;
		padding:0 42rpx!important
		
	}
	.list{
		width:100%;
		height:1000rpx;
		/* padding:40rpx */
	}
	.list .listitem{
		font-size:0;
		padding-bottom:30rpx;
		margin: 30rpx 40rpx;
		
	}
	.titles{
		width:70%;
		display: inline-block;
		vertical-align: top;
	}
	/deep/ .titles .u-body-item-title{
		height:96rpx;
	}
	.list .listitem view{
		font-size: 32rpx;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #333333;
		
	}
	.list .listitem image{
		width:30%;
		height:133rpx;
		display: inline-block;
	}
	.list .listitem .times{
		color:#808080;
		font-size: 26rpx;
	}
</style>