uni-app 带动画滑动的tabs导航栏

适用于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=='0'">
						
						<view class="music_box"  v-for="(item ,index) in tableData" :key="index" >
							
							<view @click="goto_conten(item._id)">
								
								<text class="content-n">{{index+1}}</text>
								<text class="content-t">{{item.works}}</text>
								<text class="content-a">{{item.name}}</text>
							</view>
						</view>
						
					</view>
					
					<view v-if="currentTab=='1'">
						
							<view class="music_box" v-for="(item ,index) in tableData1" :key="index" >
								<view @click="goto_conten(item._id)">
									<text class="content-n">{{index+1}}</text>
									<text class="content-t">{{item.works}}</text>
									<text class="content-a">{{item.name}}</text>
								</view>
							</view>
						
					</view>
					<view v-if="currentTab=='2'">
						
							<view class="music_box" v-for="(item ,index) in tableData2" :key="index" >
								<view @click="goto_conten(item._id)">
									<text class="content-n">{{index+1}}</text>
									<text class="content-t">{{item.works}}</text>
									<text class="content-a">{{item.name}}</text>
								</view>
							</view>
						
					</view>
					<view v-if="currentTab=='3'">
						
							<view class="music_box" v-for="(item ,index) in tableData3" :key="index" >
								<view @click="goto_conten(item._id)">
									<text class="content-n">{{index+1}}</text>
									<text class="content-t">{{item.works}}</text>
									<text class="content-a">{{item.name}}</text>
								</view>
							</view>
						
					</view>
					<view v-if="currentTab=='4'">
						
							<view class="music_box" v-for="(item ,index) in tableData4" :key="index" >
								<view @click="goto_conten(item._id)">
									<text class="content-n">{{index+1}}</text>
									<text class="content-t">{{item.works}}</text>
									<text class="content-a">{{item.name}}</text>
								</view>
							
						</view>
					</view>
					<view v-if="currentTab=='5'">
						
							<view class="music_box" v-for="(item ,index) in tableData5" :key="index" >
								<view @click="goto_conten(item._id)">
									<text class="content-n">{{index+1}}</text>
									<text class="content-t">{{item.works}}</text>
									<text class="content-a">{{item.name}}</text>
								</view>
							</view>
						
					</view>
					<view v-if="currentTab=='6'">
						
							<view class="music_box" v-for="(item ,index) in tableData6" :key="index" >
								<view @click="goto_conten(item._id)">
									<text class="content-n">{{index+1}}</text>
									<text class="content-t">{{item.works}}</text>
									<text class="content-a">{{item.name}}</text>
								</view>
							</view>
						
					</view>
					
				
				</swiper-item>
			</block>
		</swiper>
		
	</view>

</template>

<script>
	
	export default {
		computed: {

		},
		components: {

		},

		data() {
			return {
				tableData : [],
				tableData1 : [],
				tableData2 : [],
				tableData3 : [],
				tableData4 : [],
				tableData5 : [],
				tableData6 : [],
				tableData7 : [],
				width:'',
				current: "",
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				menuTabs: [{
					name: '全部'
				}, {
					name: '现代'
				}, {
					name: '经典'
				}, {
					name: '古风'
				}, {
					name: '民谣'
				}, {
					name: '潮流'
				}, {
					name: '其它'
				}],
				swiperDateList: [
					[],
					[],
					[],
					[],
					[],
					[],
					[]
				]

			}
		},
		onLoad: function() {
			
			this.getData()
			//初始化数据
			for (var i = 0; i < this.swiperDateList.length; i++) {
				this.getDateList(i);
				console.log(this.getDateList)
			}
		},
		methods: {
			
			
				// 获取数据
       			async getData() {
					

					console.log("我在这里")

       
					let style="现代"
					let stylej="经典"
					let styleg="古风"
					let stylem="民谣"
					let styles="潮流"
					let styleo="其它"

					
       				
       				const db = uniCloud.database();
       				const collection = db.collection('music_show');
       				const dbCmd = db.command;

       				let res = await collection.get()
       				let res1 = await collection.where({style}).get()
					let res2 = await collection.where({stylej}).get()
					let res3 = await collection.where({styleg}).get()
					let res4 = await collection.where({stylem}).get()
					let res5 = await collection.where({styles}).get()
					let res6 = await collection.where({styleo}).get()
					
       				console.log(res.result.data)
					console.log(res1.result.data)
       				this.tableData = res.result.data
					this.tableData1 = res1.result.data
					this.tableData2 = res2.result.data
					this.tableData3 = res3.result.data
					this.tableData4 = res4.result.data
					this.tableData5 = res5.result.data
					this.tableData6 = res6.result.data
					
       
       			},
			
			
			
			
			
			goto_conten(e){
				console.log(e)
				uni.navigateTo({
					url:'/pages/music_content/music_content?id='+e
				})
			},
			
			
			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-color: #e7e6ea;
	}

	.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: 110rpx;
		
		/* 在这里设置导航条高度 */
	}

	.top-menu-view .menu-one-view {
		display: inline-block;
		white-space: nowrap;
		height: 80rpx
	}

	.top-menu-view .menu-one-view .menu-one {
		/* 在这里写 单个按钮样式 */
		margin-left: 30rpx;
		margin-right: 30rpx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-txt {
		height: 40rpx;
		width: 40rpx;
		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: 4rpx;
	}

	.top-menu-view .menu-one-view .menu-one-act {
		/* 在这里写 单个按钮样式 */
		margin-left: 30rpx;
		margin-right: 30rpx;
		position: relative;
		height: 100%;
		width: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #f37b32;
		line-height: 40rpx;
	}

	.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: 100%;
		height: 4rpx;
		background: #f37b32;
	}

	.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: 112rpx;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	
	/* 内容 */
	
	.music_box{
		margin-top: 10px;
		padding-top: 15px;
		padding-bottom: 15px;
		background-color: #FFFFFF;
	}
	
	.content-n{
		margin-left: 10px;
		font-size: large;
		font-weight: bold;
	}
	
	.content-t{
		margin-left: 10px;
		font-size: large;
		font-weight: bold;
	}
	
	.content-a{
		margin-left: 10px;
		font-size: small;
		color: #adadad;
	}
	
</style>