uniapp如何實現選項卡功能

uniapp實作選項卡功能的方法：先寫一個外框，把選項卡固定在頂部使用【display: flex】；然後使用三目運算分別賦一個排序，如果選取則加上【inv- h-se】樣式；最後寫2個不同的容器，使用【v-show】來切換。

本教學操作環境：windows7系統、uni-app2.5.1版本，Dell G3電腦。

uniapp實作選項卡功能的方法：

步驟說明：

1、先寫一個外框，在抒寫2個內容，先把選項卡固定在頂部使用display: flex;，隨後寫2個不同的樣式去區分選中和未選擇

2、三目運算分別給他們賦一個排序，點擊的時候取得是第一個還是第二個，如果選取則新增inv-h-se樣式

3、return中預設顯示第一個

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中文網其他相關文章！