<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>
uni-app 選項卡 二
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.