Wie Uniapp die Tab-Funktion implementiert

Uniapp implementiert die Tabulatorfunktion: Schreiben Sie zuerst einen äußeren Rahmen, fixieren Sie den Tabulator oben mit [display: flex], und weisen Sie dann mit der ternären Operation jeweils eine Sortierung zu. Wenn ausgewählt, fügen Sie den Stil [inv-h-se] hinzu ; schließlich 2 verschiedene Container schreiben und mit [v-show] wechseln.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, Dell G3-Computer.

So implementieren Sie die Tab-Funktion in uniapp:

Schrittanleitung:

1. Schreiben Sie zuerst einen äußeren Rahmen, dann schreiben Sie 2 Inhalte, fixieren Sie zuerst den Tab oben mit display:flex;, und schreiben Sie dann 2 verschiedene Stile, um ausgewählte und nicht ausgewählte display: flex;，随后写2个不同的样式去区分选中和未选择

2、三目运算分别给他们赋一个排序，点击的时候获取是第一个还是第二个，如果选中则添加inv-h-se样式

3、return中默认显示第一个

4、最后写2个不同的容器，使用v-show

2 zu unterscheiden. Wenn Sie darauf klicken, wird angezeigt, ob es sich um den ersten oder den zweiten Stil handelt

3. Der erste wird standardmäßig angezeigt

4 Zum Schluss schreiben Sie 2 verschiedene Container und verwenden Sie v-show, um zu wechseln

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

Der Effekt ist wie unten gezeigt:

🎜Zugehörige kostenlose Lernempfehlungen: 🎜Programmiervideos🎜🎜🎜

Das obige ist der detaillierte Inhalt vonWie Uniapp die Tab-Funktion implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!