0
点赞
收藏
分享

微信扫一扫

uni-app 选项卡 二

蛇发女妖 2022-07-14 阅读 88

uni-app 选项卡 二_选项卡

image.png

<template>
<view>
<view class="inv-h-w" >
<block v-for="(item,index) in items" :key="index">
<view :class="['inv-h',Inv== index?'inv-h-se':'']" @click="Inv=index">{{item}}</view>
</block>
<!--<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">我是选项卡二</view>-->
</view>
<view class="" v-show="Inv == 0">
我是选项卡一
</view>
<view class="" v-show="Inv == 1">
我是选项卡二
</view>
</view>
</template>

<script>
export default {
data() {
return {
Inv:0,
items: ['商家邀请码', '商家申请列表']
}
},
methods: {
changeTab(Inv){
that.navIdx = Inv;

},
}
}
</script>

<style>
.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
.inv-h{font-size: 32upx;flex: 1;text-align: center;color: #666666;height: 100upx;line-height: 100upx;position: relative;
}
.inv-h-se{
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #4DB046;
}
.inv-h-se:after {
content: '';
position: absolute;
bottom: -2rpx;
top: auto;
left: 42%;
height: 6rpx;
width: 44rpx;
background-color: #4DB046;
}

page{background-color: #F2F2F2;}
</style>


举报

相关推荐

0 条评论