直播app开发，滑动式的顶部导航栏（左右横向滑动）

直播app开发，滑动式的顶部导航栏（左右横向滑动）效果实现的相关代码

<template>
	<view class="container">
		<view class="status_bar" v-bind:style="{ height: statusBarHeight }"></view>
	   <!-- <view class="navbar">
			 <view :class="[tabindex==1?'navbtn':'navactive']"   @click="switchtabar(1)">接单任务</view>
			 <view :class="[tabindex==2?'navbtn':'navactive']"    @click="switchtabar(2)">套餐任务</view>
			 <view :class="[tabindex==3?'navbtn':'navactive']"    @click="switchtabar(3)">接单记录</view>
		</view> -->
		<view class="uni-tab-bar">
			<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
				<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']" :id="tab.id"
				 :data-current="index" @click="tapTab(index)">{{tab.name}}</view>
			</scroll-view>
			<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item v-for="(tab,index1) in newsitems" :key="index1">
					 
					{{tab.name}}
				</swiper-item>
			</swiper>
		</view>
		
		
	</view>
  
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import util from '../../static/js/util.js';
import regex from '../../static/js/regex.js';
export default {
	computed: {
		...mapGetters(['statusBarHeight'])
	},
	data() {
		return {
			pay: {},
			status: '',
			paylists: {},
			payname: uni.getStorageSync('paylist').pay_type_name,
			payid: uni.getStorageSync('paylist').id,
			tabindex:1,
			newsitems:[{
				name: '关注',
				id: 'guanzhu'
			}, {
				name: '推荐',
				id: 'tuijian'
			}, {
				name: '体育',
				id: 'tiyu'
			}, {
				name: '热点',
				id: 'redian'
			}, {
				name: '财经',
				id: 'caijing'
			}, {
				name: '娱乐',
				id: 'yule'
			}, {
				name: '军事',
				id: 'junshi'
			}, {
				name: '历史',
				id: 'lishi'
			}, {
				name: '本地',
				id: 'bendi'
			}],
			tabBars: [{
				name: '关注',
				id: 'guanzhu'
			}, {
				name: '推荐',
				id: 'tuijian'
			}, {
				name: '体育',
				id: 'tiyu'
			}, {
				name: '热点',
				id: 'redian'
			}, {
				name: '财经',
				id: 'caijing'
			}, {
				name: '娱乐',
				id: 'yule'
			}, {
				name: '军事',
				id: 'junshi'
			}, {
				name: '历史',
				id: 'lishi'
			}, {
				name: '本地',
				id: 'bendi'
			}],
			scrollLeft: 0,
			isClickChange: false,
			tabIndex: 0,
		};
	},
	onLoad: function(e) {
		this.pay = uni.getStorageSync('paylist');

	},
	methods: {
		async changeTab(e) {
			let index = e.detail.current;
			if (this.isClickChange) {
				this.tabIndex = index;
				this.isClickChange = false;
				return;
			}
			let tabBar = await this.getElSize("tab-bar"),
				tabBarScrollLeft = tabBar.scrollLeft;
			let width = 0;
		
			for (let i = 0; i < index; i++) {
				let result = await this.getElSize(this.tabBars[i].id);
				width += result.width;
			}
			let winWidth = uni.getSystemInfoSync().windowWidth,
				nowElement = await this.getElSize(this.tabBars[index].id),
				nowWidth = nowElement.width;
			if (width + nowWidth - tabBarScrollLeft > winWidth) {
				this.scrollLeft = width + nowWidth - winWidth;
			}
			if (width < tabBarScrollLeft) {
				this.scrollLeft = width;
			}
			this.isClickChange = false;
			this.tabIndex = index; //一旦访问data就会出问题
		},
		async tapTab(index) { //点击tab-bar
		   console.log(index);
			if (this.tabIndex === index) {
				return false;
			} else {
				let tabBar = await this.getElSize("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
				this.scrollLeft = tabBarScrollLeft;
				this.isClickChange = true;
				this.tabIndex = index;
			}
		},
		switchtabar(index){
			this.tabindex=index;
		},
		getElSize(id) { //得到元素的size
			return new Promise((res, rej) => {
				uni.createSelectorQuery().select('#' + id).fields({
					size: true,
					scrollOffset: true
				}, (data) => {
					res(data);
				}).exec();
			});
		},
		golist() {
			uni.navigateTo({
				url: '/pages/c2c/selloutlist'
			});
		},
		goerwei() {
			uni.navigateTo({
				url: '/pages/c2c/opay?pay=1'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.container {
	width: 100%;
	font-size: 28upx;
	background: #f2f2f2;
	color: #555;
	height: 100vh;
	overflow: scroll;
	position: absolute;
	font-weight: 400;
	font-family: '仿宋';
	text-align: center;
	.navbar{
		width: 100%;
		font-size: 28upx;
		background: #fff;
		color: #000;
		height: 90upx;
		
		.navbtn{
			width:33%;
			float:left;
			line-height: 90upx;
			font-size:36px;
			border-bottom:5upx solid #E6BE7D;
		}
		.navactive{
			width:33%;
			float:left;
			line-height: 90upx;
			font-size:28px;
			border-bottom:5upx solid #fff;
			color:#ccc;
			
		}
	}
	
	
}
</style>

以上就是直播app开发，滑动式的顶部导航栏（左右横向滑动）效果实现的相关代码， 更多内容欢迎关注之后的文章

最后

以上就是漂亮鸡为你收集整理的直播app开发，滑动式的顶部导航栏（左右横向滑动）的全部内容，希望文章能够帮你解决直播app开发，滑动式的顶部导航栏（左右横向滑动）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。