151 lines
3.5 KiB
Vue
151 lines
3.5 KiB
Vue
<template>
|
|
<scroll-view scroll-x="true" :scroll-left="tabsScrollLeft" @scroll="scroll">
|
|
<view class="pull-nav-btns" :class="type=='radio'?'search-btns':''" :style="{width:newWidth}" id="tab_list">
|
|
<view @tap="chooseEv(index,item.id)" id="tab_item" :class="currentIndex==index?'radio-btn active':'radio-btn'" v-for="(item,index) in list" v-if="type=='radio'">
|
|
<view class="radio"></view>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
<view @tap="chooseEv(index,item.id)" id="tab_item" :style="{width:'220rpx',margin:'0 25rpx'}" :class="currentIndex==index?'btn active':'btn'" v-for="(item,index) in list" v-if="type=='list' && index<=maxNum && maxNum<=3">{{item.name}}</view>
|
|
<view @tap="chooseEv(index,item.id)" id="tab_item" :style="{width:'170rpx',margin:'0 20rpx'}" :class="currentIndex==index?'btn active':'btn'" v-for="(item,index) in list" v-if="type=='list' && index<=maxNum && maxNum>3">{{item.name}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:'nav-tab',
|
|
props:{
|
|
list:{
|
|
type:Array,
|
|
default:()=>{
|
|
return []
|
|
}
|
|
},
|
|
type:{
|
|
type:String,
|
|
default:'list'
|
|
}, //展现方式
|
|
maxNum:{
|
|
type:Number,
|
|
default:2
|
|
},
|
|
newWidth:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
currentIndex:0, //当前位置
|
|
scrollLeft:0,
|
|
tabsScrollLeft:0,
|
|
styleData:{}, //样式控制
|
|
}
|
|
},
|
|
watch: {
|
|
list() {
|
|
this.setTabList()
|
|
},
|
|
value() {
|
|
this.currentIndex = this.value
|
|
this.setTabList()
|
|
}
|
|
},
|
|
methods:{
|
|
// 导航选择事件
|
|
chooseEv(index,id) {
|
|
if(this.currentIndex !== index){
|
|
this.currentIndex = index;
|
|
// 抛出事件
|
|
this.$emit('chooseEv',index,id);
|
|
this.setTabList();
|
|
}
|
|
},
|
|
setTabList() {
|
|
this.$nextTick(() => {
|
|
if (this.list.length > 0) {
|
|
this.setLeft()
|
|
}
|
|
})
|
|
},
|
|
setLeft() {
|
|
let lineLeft = 0;
|
|
this.getElementData('#tab_list', (data) => {
|
|
let list = data[0];
|
|
this.getElementData(`#tab_item`, (res) => {
|
|
let el = res[this.currentIndex]
|
|
lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
|
|
this.tabsScrollLeft = this.scrollLeft + lineLeft
|
|
})
|
|
})
|
|
},
|
|
getElementData(el, callback) {
|
|
uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
|
|
callback(data[0]);
|
|
});
|
|
},
|
|
//滚动
|
|
scroll(e) {
|
|
this.scrollLeft = e.detail.scrollLeft;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pull-nav-btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-width: 100%;
|
|
padding: 25rpx 0;
|
|
}
|
|
|
|
.pull-nav-btns .btn {
|
|
height: 66rpx;
|
|
border-radius: 10rpx;
|
|
line-height: 66rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.pull-nav-btns .btn:first-child{
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.pull-nav-btns .btn:last-child{
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.pull-nav-btns .btn.active {
|
|
background-color: #0073bc;
|
|
color: #FFFFFF;
|
|
}
|
|
.pull-nav-btns.search-btns{
|
|
justify-content: flex-start;
|
|
padding: 8rpx 0 20rpx;
|
|
}
|
|
.pull-nav-btns .radio-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 40rpx;
|
|
line-height: 66rpx;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
}
|
|
.pull-nav-btns .radio-btn .radio{
|
|
box-sizing: border-box;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 12rpx;
|
|
border: 2rpx solid #333333;
|
|
border-radius: 100%;
|
|
}
|
|
.pull-nav-btns .radio-btn:first-child{
|
|
margin-left: 0;
|
|
}
|
|
|
|
.pull-nav-btns .radio-btn.active .radio{
|
|
border: 8rpx solid #0073bc;
|
|
}
|
|
</style> |