106 lines
2.0 KiB
Vue
106 lines
2.0 KiB
Vue
<template>
|
|
<view class="pull-nav-btns" :class="type=='radio'?'search-btns':''">
|
|
<view @tap="chooseEv(index,item.id)" :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)" :class="currentIndex==index?'btn active':'btn'" v-for="(item,index) in list" v-if="type=='list' && index<=maxNum">{{item.name}}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:'nav-tab',
|
|
props:{
|
|
list:{
|
|
type:Array,
|
|
default:()=>{
|
|
return []
|
|
}
|
|
},
|
|
type:{
|
|
type:String,
|
|
default:'list'
|
|
}, //展现方式
|
|
maxNum:{
|
|
type:String,
|
|
default:2
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
currentIndex:0, //当前位置
|
|
}
|
|
},
|
|
methods:{
|
|
// 导航选择事件
|
|
chooseEv(index,id) {
|
|
if(this.currentIndex !== index){
|
|
this.currentIndex = index;
|
|
// 抛出事件
|
|
this.$emit('chooseEv',index,id)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pull-nav-btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 25rpx 0;
|
|
}
|
|
|
|
.pull-nav-btns .btn {
|
|
width: 220rpx;
|
|
height: 66rpx;
|
|
margin: 0 25rpx;
|
|
border-radius: 10rpx;
|
|
line-height: 66rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.pull-nav-btns .btn:first-child{
|
|
margin-left: 0;
|
|
}
|
|
|
|
.pull-nav-btns .btn:last-child{
|
|
margin-right: 0;
|
|
}
|
|
|
|
.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> |