Rumah  >  Artikel  >  hujung hadapan web  >  uniapp如何实现选项卡功能

uniapp如何实现选项卡功能

coldplay.xixi
coldplay.xixiasal
2020-12-08 11:28:307030semak imbas

uniapp实现选项卡功能的方法:首先写一个外框,把选项卡固定在顶部使用【display: flex】;然后使用三目运算分别赋一个排序,如果选中则添加【inv-h-se】样式;最后写2个不同的容器,使用【v-show】来切换。

uniapp如何实现选项卡功能

本教程操作环境: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>

效果如图:

28a2492158b9384031726f78b017c8d.png

相关免费学习推荐:编程视频

Atas ialah kandungan terperinci uniapp如何实现选项卡功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn