uni-app 顶部tab切换菜单 顶部可滑动切换菜单

顶部tab切换菜单（都是最基础的）

第一种卡片切换

demo.vue

    
            0 == current}" @click="clickTab(0)">
                自选
            
            1 == current}" @click="clickTab(1)">
                全部
            

js

css

.tab{
    width: 100%;
    height: 88upx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tabItem{
    width: 100upx;
    height: 50upx;
    line-height: 50upx;
    font-size: 28upx;
    font-weight: bold;
    text-align: center;
    color: #666666;
    background:#f1f1f1;
}
.active{
    background-color: #007AFF;    
    color: #FFFFFF;
}

第二种tab切换

demo.vue

            :class="{'ct_active' : 0 == tabCur}" @click="clickCtTab(0)">
                全部
            
            :class="{'ct_active' : 1 == tabCur}" @click="clickCtTab(1)">
                分类
            
        

js

export default {
        data() {
            return {
                tabCur:0,
            }
        },
        methods: {
            clickCtTab(ctCur){
                this.tabCur = ctCur
            }
        }
    }

css

.ct_tab{
    width: 698upx;
    margin: 0 auto;
    padding: 30upx 0;
    font-size: 26upx;
    font-weight: bold;
    color: #c0c8d0;
    display: flex;
    align-items: center;
}
.ct_item{
    width: 20%;
}
.ct_item text{
    padding: 30upx 0;
}
.ct_active{
    color:#007AFF;
}
.ct_active text{
    border-bottom: 2px solid #007AFF;
}

第三种可滑动切换菜单(swiper,scroll-view )

demo.vue(swiper)

                :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index" class="ct_item"  @click="clickCtTab(index)">
                    
                
            

js

css

.ct_tab{
    width: 698upx;
    margin: 0 auto;
    padding: 30upx 0;
    font-size: 26upx;
    font-weight: bold;
    color: #c0c8d0;
    white-space: nowrap;
    display: flex;
    overflow: hidden;
}
.ct_item{
    width: 150upx;    
    padding: 30upx 0;
    display: inline-block;
}
.ct_item text{
    padding: 30upx 0;
}
.ct_active{
    color:#007AFF;
}
.ct_active text{
    border-bottom: 2px solid #007AFF;
}
swiper{
    width:100%;
}

swiper-item{
    width: 150upx !important;
}

demo.vue(scroll-view)

                    :class="{ 'ct_active': index == tabCur }" v-for="(item,index) in tabList" :key="index" @click="clickCtTab(index)">
                        
                    
            

 

js

css

.ct_tab{
    width: 698upx;
    margin: 0 auto;
    padding: 30upx 0;
    font-size: 26upx;
    font-weight: bold;
    color: #c0c8d0;
    white-space: nowrap;
    display: flex;
    overflow: hidden;
}
.ct_item{
    width: 150upx;    
    padding: 26upx 0;
    display: inline-block;
}
.ct_item text{
    padding: 30upx 0;
}
.ct_active{
    color:#007AFF;
}
.ct_active text{
    border-bottom: 2px solid #007AFF;
}