|
1.刚开始接触uniapp的时候一直纠接这个导航栏滑动的问题。今天抽空把有用的部分提拉出来。做个小笔记。
<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>
|
转播
