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

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

 

1

<template><br><view><br><view v-bind:style="{ height: statusBarHeight }"></view><br>   <!-- <view><br><view :class="[tabindex==1?'navbtn':'navactive']"   @click="switchtabar(1)">接单任务</view><br><view :class="[tabindex==2?'navbtn':'navactive']"    @click="switchtabar(2)">套餐任务</view><br><view :class="[tabindex==3?'navbtn':'navactive']"    @click="switchtabar(3)">接单记录</view><br></view> --><br><view><br><scroll-view id="tab-bar" scroll-x :scroll-left="scrollLeft"><br><view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']" :id="tab.id"<br>:data-current="index" @click="tapTab(index)">{{tab.name}}</view><br></scroll-view><br><swiper :current="tabIndex" duration="300" @change="changeTab"><br><swiper-item v-for="(tab,index1) in newsitems" :key="index1"><br> <br>{{tab.name}}<br></swiper-item><br></swiper><br></view><br></view><br>  <br></template><br><script><br>import { mapGetters, mapActions } from 'vuex';<br>import util from '../../static/js/util.js';<br>import regex from '../../static/js/regex.js';<br>export default {<br>computed: {<br>...mapGetters(['statusBarHeight'])<br>},<br>data() {<br>return {<br>pay: {},<br>status: '',<br>paylists: {},<br>payname: uni.getStorageSync('paylist').pay_type_name,<br>payid: uni.getStorageSync('paylist').id,<br>tabindex:1,<br>newsitems:[{<br>name: '关注',<br>id: 'guanzhu'<br>}, {<br>name: '推荐',<br>id: 'tuijian'<br>}, {<br>name: '体育',<br>id: 'tiyu'<br>}, {<br>name: '热点',<br>id: 'redian'<br>}, {<br>name: '财经',<br>id: 'caijing'<br>}, {<br>name: '娱乐',<br>id: 'yule'<br>}, {<br>name: '军事',<br>id: 'junshi'<br>}, {<br>name: '历史',<br>id: 'lishi'<br>}, {<br>name: '本地',<br>id: 'bendi'<br>}],<br>tabBars: [{<br>name: '关注',<br>id: 'guanzhu'<br>}, {<br>name: '推荐',<br>id: 'tuijian'<br>}, {<br>name: '体育',<br>id: 'tiyu'<br>}, {<br>name: '热点',<br>id: 'redian'<br>}, {<br>name: '财经',<br>id: 'caijing'<br>}, {<br>name: '娱乐',<br>id: 'yule'<br>}, {<br>name: '军事',<br>id: 'junshi'<br>}, {<br>name: '历史',<br>id: 'lishi'<br>}, {<br>name: '本地',<br>id: 'bendi'<br>}],<br>scrollLeft: 0,<br>isClickChange: false,<br>tabIndex: 0,<br>};<br>},<br>onLoad: function(e) {<br>this.pay = uni.getStorageSync('paylist');<br>},<br>methods: {<br>async changeTab(e) {<br>let index = e.detail.current;<br>if (this.isClickChange) {<br>this.tabIndex = index;<br>this.isClickChange = false;<br>return;<br>}<br>let tabBar = await this.getElSize("tab-bar"),<br>tabBarScrollLeft = tabBar.scrollLeft;<br>let width = 0;<br>for (let i = 0; i < index; i++) {<br>let result = await this.getElSize(this.tabBars[i].id);<br>width += result.width;<br>}<br>let winWidth = uni.getSystemInfoSync().windowWidth,<br>nowElement = await this.getElSize(this.tabBars[index].id),<br>nowWidth = nowElement.width;<br>if (width + nowWidth - tabBarScrollLeft > winWidth) {<br>this.scrollLeft = width + nowWidth - winWidth;<br>}<br>if (width < tabBarScrollLeft) {<br>this.scrollLeft = width;<br>}<br>this.isClickChange = false;<br>this.tabIndex = index; //一旦访问data就会出问题<br>},<br>async tapTab(index) { //点击tab-bar<br>   console.log(index);<br>if (this.tabIndex === index) {<br>return false;<br>} else {<br>let tabBar = await this.getElSize("tab-bar"),<br>tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft<br>this.scrollLeft = tabBarScrollLeft;<br>this.isClickChange = true;<br>this.tabIndex = index;<br>}<br>},<br>switchtabar(index){<br>this.tabindex=index;<br>},<br>getElSize(id) { //得到元素的size<br>return new Promise((res, rej) => {<br>uni.createSelectorQuery().select('#' + id).fields({<br>size: true,<br>scrollOffset: true<br>}, (data) => {<br>res(data);<br>}).exec();<br>});<br>},<br>golist() {<br>uni.navigateTo({<br>url: '/pages/c2c/selloutlist'<br>});<br>},<br>goerwei() {<br>uni.navigateTo({<br>url: '/pages/c2c/opay?pay=1'<br>});<br>}<br>}<br>};<br></script><br><style scoped><br>.container {<br>width: 100%;<br>font-size: 28upx;<br>background: #f2f2f2;<br>color: #555;<br>height: 100vh;<br>overflow: scroll;<br>position: absolute;<br>font-weight: 400;<br>font-family: '仿宋';<br>text-align: center;<br>.navbar{<br>width: 100%;<br>font-size: 28upx;<br>background: #fff;<br>color: #000;<br>height: 90upx;<br>.navbtn{<br>width:33%;<br>float:left;<br>line-height: 90upx;<br>font-size:36px;<br>border-bottom:5upx solid #E6BE7D;<br>}<br>.navactive{<br>width:33%;<br>float:left;<br>line-height: 90upx;<br>font-size:28px;<br>border-bottom:5upx solid #fff;<br>color:#ccc;<br>}<br>}<br>}<br></style>

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