uniapp がタブ関数を実装する方法

Uniapp のタブ関数の実装方法: まず外枠を記述し、タブを上部に固定して [display: flex] を使用し、次に三項演算を使用してそれぞれソートを割り当て、選択されている場合は [ を追加します。 inv- h-se] スタイル; 最後に 2 つの異なるコンテナを作成し、[v-show] を使用して切り替えます。

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、Dell G3 コンピューター。

Uniapp のタブ機能の実装方法:

手順:

1. 最初に外枠を書き、次に 2 つのコンテンツを書き、最初に Fix display: flex; を使用して上部のタブに、選択されたものと選択されていないものを区別する 2 つの異なるスタイルを記述します。

2. 三項演算を使用してそれぞれに並べ替えを割り当て、[When] をクリックします。最初または 2 番目のコンテナーを取得する (選択した場合)、inv-h-se スタイル

3 を追加します。最初のコンテナーはデフォルトで戻り値

4 に表示されます。最後に、2 つの異なるコンテナーを作成しますv-show を使用して

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

を切り替えます。効果は次のとおりです:

##関連する無料学習の推奨事項:

プログラミングビデオ

以上がuniapp がタブ関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。