uniapp如何实现选项卡功能

百变鹏仔 4周前 (11-21) #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>                        <view>选项卡1</view>                        <view>我是选项卡二</view>                </view>                <view>                        我是选项卡一                </view>                <view>                        我是选项卡二                </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如何实现选项卡功能

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项