uni-app 选项卡

<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>