uni-app实现仿美团菜单,点击导航切换内容(NO.2)
仅适用于内容固定而且很少的情况下使用,导航因为内容少,样式是自己写的,不是滚动型,文字底部高亮是伪类,跟随文字位置
1.template,这里只放切换的代码
<view>
<view class="plan1 fle bor_bot">
<view class="item fle_all " v-for="(item,index) in menu_name" :class="index==lun3?'cur':''" @tap="lun_bo(index)">
<view class="text ">
<text class="fle_all"> {{item.name}}</text>
</view>
<view class="text2">
<text>01</text>
</view>
</view>
</view>
<view class="plan2" v-if="lun3==0">
点餐
</view>
<view class="plan3 fle" v-if="lun3==1">
评价
</view>
</view>
2.css
.plan3 {
height: 100rpx;
}
.plan3 .item {
padding: 0rpx 40rpx;
}
.plan3 .text {
display: block;
height: 100%;
position: relative;
}
.plan3 .cur {
color: #007AFF;
position: relative;
}
.plan3 .cur::after {
content: '';
position: absolute;
left: 58rpx;
top: auto;
bottom: -2rpx;
right: auto;
height: 6rpx;
width: 40rpx;
background-color: #32b66b;
}
.plan3 .text text {
font-size: 36rpx;
font-weight: bold;
height: 100%;
}
.plan3 .text2 {
width: 10rpx;
position: relative;
}
.plan3 .text2 text {
position: absolute;
top: -6rpx;
margin-left: 8rpx;
font-size: 22rpx;
font-weight: bold;
color: #bbb;
}
3.script
<script>
export default {
data() {
return {
menu_name: [{
name: '点菜'
}, {
name: '评价'
}, {
name: '商家'
}],
lun3: 0,
}
},
methods: {
lun_bo(e) {
this.lun3 = e
},
}
}
</script>