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

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

第一种卡片切换

demo.vue

<view class="tab">    
            <view class="tabItem" :class="{'active' : 0 == current}" @click="clickTab(0)">
                自选
            </view>
            <view class="tabItem" :class="{'active' : 1 == current}" @click="clickTab(1)">
                全部
            </view>
</view>

js

<script>
    export default {
        data() {
            return {
                current:0
            }
        },
        methods: {
            clickTab(cur){
                this.current = cur
            }
        }
    }
</script>

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

<view class="ct_tab">
            <view class="ct_item" :class="{'ct_active' : 0 == tabCur}" @click="clickCtTab(0)">
                <text>全部</text>
            </view>
            <view class="ct_item" :class="{'ct_active' : 1 == tabCur}" @click="clickCtTab(1)">
                <text>分类</text>
            </view>
        </view>

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)

<swiper class="ct_tab">
                <swiper-item  :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index" class="ct_item"  @click="clickCtTab(index)">
                    <text  v-text="item.title"></text>
                </swiper-item>
            </swiper>

js

<script>
    export default {
        data() {
            return {
                tabCur:0,
                tabList:[
                    {
                        title:'全部',
                    },{
                        title:'水果',
                    },{
                        title:'蔬菜',
                    },{
                        title:'调味品',
                    },{
                        title:'肉类',
                    },{
                        title:'油类',
                    },{
                        title:'米类',
                    },{
                        title:'海鲜',
                    }
                ]
            }
        },
        methods: {
            clickCtTab(ctCur){
                this.tabCur = ctCur
            }
        }
    }
</script>

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)

<scroll-view scroll-x="true" class="ct_tab">
                    <view class="ct_item" :class="{ 'ct_active': index == tabCur }" v-for="(item,index) in tabList" :key="index" @click="clickCtTab(index)">
                        <text v-text="item.title"></text>
                    </view>
            </scroll-view>

 

js

<script>
    export default {
        data() {
            return {
                tabCur:0,
                tabList:[
                    {
                        title:'全部',
                    },{
                        title:'水果',
                    },{
                        title:'蔬菜',
                    },{
                        title:'调味品',
                    },{
                        title:'肉类',
                    },{
                        title:'油类',
                    },{
                        title:'米类',
                    },{
                        title:'海鲜',
                    }
                ]
            }
        },
        methods: {
            clickCtTab(ctCur){
                this.tabCur = ctCur
            }
        }
    }
</script>

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