0
点赞
收藏
分享

微信扫一扫

uni-app 选项卡

7dcac6528821 2022-07-14 阅读 85
编程语言

<template>

<view class="end-title">
<view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)">
{{item}}
</view>
</view>
<view class="end-cont" :class="{dis:btnnum == 0}">
  0信息
</view>
<view class="end-cont" :class="{dis:btnnum == 1}">
  1信息
</view>
<view class="end-cont" :class="{dis:btnnum == 2}">
  2信息
</view>
</template>

<script>
export default {
/*data() {
return {
tabBar: ['商家邀请码', '商家申请列表']
}
},
methods: {

}*/
data() {
return {
btnnum: 0,
items:["基本信息","公告信息","换区信息"],
count:"",
};
},
methods:{
change(e) {
this.count = e
this.btnnum = e
console.log(this.count)
}
}
}
</script>

<style>
/* 将三个内容view的display设置为none(隐藏) */
.end-title{
display: flex;
}
.end-title view{
flex-grow: 1;
text-align: center;
}
.end-cont{
display: none;
background: #C8C7CC;
}
.btna{
color: #FFFFFF;
background: #00A0FF;
}
.dis{
display: block;
}
</style>

举报

相关推荐

0 条评论