How uniapp implements tab function

Uniapp's method to implement the tab function: first write an outer frame, fix the tab at the top and use [display: flex]; then use ternary operation to assign a sort respectively, and if selected, add [inv- h-se] style; finally write two different containers and use [v-show] to switch.

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer.

Uniapp's method of implementing the tab function:

Step instructions:

1. First write an outer frame, then write 2 contents, first Fix the tab at the top using display: flex;, and then write 2 different styles to distinguish between selected and unselected

2. Use ternary operation to assign a sort to them respectively, click When getting the first or second one, if selected, add the inv-h-se style

3. The first one is displayed by default in the return

4. Finally, write 2 different container, use v-show to switch

<template>
        <view>
                <view class="inv-h-w">
                        <view :class="[&#39;inv-h&#39;,Inv==0?&#39;inv-h-se&#39;:&#39;&#39;]" @click="Inv=0">选项卡1</view>
                        <view :class="[&#39;inv-h&#39;,Inv==1?&#39;inv-h-se&#39;:&#39;&#39;]" @click="Inv=1">我是选项卡二</view>
                </view>
                <view class="" v-show="Inv == 0">
                        我是选项卡一
                </view>
                <view class="" v-show="Inv == 1">
                        我是选项卡二
                </view>
        </view>
</template>
 
<script>
        export default {
                data() {
                        return {
                                Inv:0
                        }
                },
                methods: {
                        changeTab(Inv){
                                that.navIdx = Inv;
                                 
                        },
                }
        }
</script>
         
<style>
        .inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
        .inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
        .inv-h-se{color: #5BA7FF;border-bottom: 4upx solid #5BA7FF;}
        page{background-color: #F2F2F2;}
</style>

The effect is as shown:

##Related free learning recommendations:

Programming Video

The above is the detailed content of How uniapp implements tab function. For more information, please follow other related articles on the PHP Chinese website!