<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>
uni-app 選項卡
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
【Xss-fiddler漏洞測試】通過該種方式 可以批量掃描也可以使用super xary 進行圖形掃描
下載xary-社區版 生成xary 證書 xxx genca Chrome 安裝證書-設置-隱私安全-安全-管理證書-導入 Chrome 安裝代理 Fiddler 設置 轉向代理 命令行啓動xary