56 lines
898 B
Vue
56 lines
898 B
Vue
|
<template>
|
||
|
|
<view class="navs">
|
||
|
|
<text @tap="navChange(item.val)" :class="current==item.val?'active':''" v-for="(item,index) in navs" :key="index">{{item.text}}</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props:['navs','loading'],
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
current:"",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
navChange(val){
|
||
|
|
if(this.loading==undefined){
|
||
|
|
this.current=val;
|
||
|
|
this.$emit("change",val);
|
||
|
|
}else{
|
||
|
|
if(!this.loading){
|
||
|
|
this.current=val;
|
||
|
|
this.$emit("change",val);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.navs{
|
||
|
|
background-color: white;
|
||
|
|
padding:26rpx 40rpx;
|
||
|
|
position: fixed;
|
||
|
|
top: 44px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 2;
|
||
|
|
box-shadow:0 0 5px #dadada;
|
||
|
|
text{
|
||
|
|
color: #202020;
|
||
|
|
opacity: 0.5;
|
||
|
|
margin-right: 40rpx;
|
||
|
|
padding-bottom:3rpx;
|
||
|
|
&.active{
|
||
|
|
opacity: 1;
|
||
|
|
border-bottom:3px solid #1890FF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|