直播app開發，滑動式的頂部導航欄（左右橫向滑動）

直播app開發，滑動式的頂部導航欄（左右橫向滑動）效果實現的相關程式碼

<template>
<view>
<view v-bind:style="{ height: statusBarHeight }"></view>
   <!-- <view>
<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>
<scroll-view id="tab-bar" 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" 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 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開發，滑動式的頂部導航欄（左右橫向滑動）效果實現的相關程式碼， 更多內容歡迎關注之後的文章