uni-app 滑动切换

头部导航栏切换

<template>
	
	<view class="body-view">
			<scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft">
				<block v-for="(menuTab,index) in menuTabs" :key="index">
					<view class="menu-one-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
						<view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
							<view class="menu-one-txt">{{menuTab.name}}</view>
							<view class="menu-one-bottom">
								<view class="menu-one-bottom-color"></view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			<swiper :current="currentTab" class="swiper-box-list" duration="300" @change="swiperChange">
				<block v-for="(swiperDate,index1) in swiperDateList" :key="index1">
					<swiper-item  >
						<view v-if="currentTab=='1'">00</view>
						<view v-if="currentTab=='2'">22</view>
						<view v-if="currentTab=='3'">33</view>
						<view v-if="currentTab=='4'">44</view>
						<view v-if="currentTab=='5'">55</view>
					</swiper-item>
				</block>
			</swiper>
	</view>
	
</template>

<script>
	// import common from '@/common/common.js'
	// import service from '@/service.js';
	// import {
	//     mapState,
	//     mapMutations,
		
	// } from 'vuex'

	export default {
		computed:{
		
		},
		components: {
		  
		},
		
	    data() {
	        return {
	            current:"",	
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				menuTabs: [{
					name: '验证报修'
				}, {
					name: '出料'
				}, {
					name: '战友互助'
				}, {
					name: '趣味杂谈'
				}, {
					name: '怀旧时光'
				}, {
					name: '军旅生活'
				}],
				swiperDateList: [[],[],[],[],[],[]]
					
	        }
	    },
		onLoad: function() {
					//初始化数据
					for (var i = 0; i < this.swiperDateList.length; i++) {
						this.getDateList(i);
						console.log(this.getDateList)
					}
		},
	    methods: {
			swichMenu: async function(current) { //点击其中一个 menu
								if (this.currentTab == current) {
									return false;
								} else {
									this.currentTab = current;
									this.setScrollLeft(current);
								}
							},
							swiperChange: async function(e) {
									let index = e.target.current;
									this.setScrollLeft(index);
									this.currentTab = index; 
									// console.log(this.currentTab)
									// var current=this.currentTab
									// this.current=current
								},
								setScrollLeft: async function(tabIndex) {
										let leftWidthSum = 0;
										for (var i = 0; i <= tabIndex; i++) {
											let nowElement = await this.getWidth('tabNum' + i);
											leftWidthSum = leftWidthSum + nowElement.width;
										}
										let winWidth = uni.getSystemInfoSync().windowWidth;
										this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
									},
									getWidth: function(id) { //得到元素的宽高
										return new Promise((res, rej) => {
											uni.createSelectorQuery().select("#" + id).fields({
												size: true,
												scrollOffset: true
											}, (data) => {
												res(data);
											}).exec();
										})
									},
									
									getDateList: function(tabIndex) {
										for (var i = 0; i < 20; i++) {
											var entity = this.menuTabs[tabIndex].name + (this.swiperDateList[tabIndex].length);
											this.swiperDateList[tabIndex].push(entity);
										}
									}
			
		  },
		  
		  
		  }
</script>

<style>
	
	page {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: center;
			background: rgba(249, 249, 249, 1);
		}
	 
		.body-view {
			display: flex;
			flex: 1;
			flex-direction: column;
			overflow: hidden;
			height: 100%;
			width: 100%;
			align-items: flex-start;
			justify-content: center;
		}
	 
		.top-menu-view {
			display: flex;
			white-space: nowrap;
			width: 100%;
			background-color: #FFFFFF;
			height: 112upx;
			/* 在这里设置导航条高度 */
		}
	 
		.top-menu-view .menu-one-view {
			display: inline-block;
			white-space: nowrap;
			height: 100%;
		}
	 
		.top-menu-view .menu-one-view .menu-one {
			/* 在这里写 单个按钮样式 */
			margin-left: 25upx;
			margin-right: 25upx;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	 
		.top-menu-view .menu-one-view .menu-one .menu-one-txt {
			height: 40upx;
			font-size: 28upx;
			font-weight: 400;
			color: rgba(154, 154, 154, 1);
			line-height: 40upx;
		}
	 
		.top-menu-view .menu-one-view .menu-one .menu-one-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;
		}
	 
		.top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
			width: 60%;
			height: 4upx;
		}
	 
		.top-menu-view .menu-one-view .menu-one-act {
			/* 在这里写 单个按钮样式 */
			margin-left: 25upx;
			margin-right: 25upx;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	 
		.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
			height: 40upx;
			font-size: 28upx;
			font-weight: 400;
			color: rgba(0, 170, 255, 1);
			line-height: 40upx;
		}
	 
		.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: center;
		}
	 
		.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
			width: 60%;
			height: 4upx;
			background: rgba(0, 170, 255, 1);
		}
	 
		.swiper-box-list {
			flex: 1;
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
		}
	 
		.swiper-one-list {
			height: 100%;
			width: 100%;
		}
	 
		.swiper-one-list .swiper-list-entity {
			width: 100%;
			height: 112upx;
			text-align: center;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}
	
</style>