Comment Uniapp implémente la fonction d'onglet

Uniapp implémente la fonction de tabulation : écrivez d'abord un cadre externe, fixez l'onglet en haut et utilisez [display: flex] puis utilisez l'opération ternaire pour attribuer un tri respectivement, et si sélectionné, ajoutez [inv- style h-se] ; écrivez enfin deux conteneurs différents et utilisez [v-show] pour changer.

L'environnement d'exploitation de ce tutoriel : système Windows7, version uni-app2.5.1, ordinateur Dell G3.

Comment uniapp implémente la fonction de tabulation :

Instructions d'étape :

1. Écrivez d'abord un cadre extérieur, puis écrivez 2 contenus, d'abord Corrigez. l'onglet en haut à l'aide de display: flex;, puis écrivez 2 styles différents pour distinguer les sélectionnés et les non sélectionnés

2. Donnez-leur un tri par opération ternaire, et obtenez le premier en cliquant sur Le premier ou le le deuxième, si sélectionné, ajoutez le style inv-h-se

3. Le premier est affiché par défaut en retour

4. Enfin, écrivez 2 conteneurs différents, utilisez v-show Pour changer

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

, l'effet est le suivant :

Recommandations d'apprentissage gratuites associées : Vidéo de programmation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!