uni 实现切换导航栏

1、实现一个简单的切换标签，显示不同内容效果。代码如下：

<template>
    <view class="warehousingToBeCon">
        <!-- nav -->
        <view class="nav">
            <view class="flex_between">
                <view class="nav_title" v-for="(item,index) in dataList">
                    <view :class="{'active':isActive==index}" @click="chenked(index)">
                        {{item.name}}
                    </view>
                </view>
            
            </view>
        </view>


        <!-- 内容模块 -->
        <view class="nav_item" v-if="isActive==0">
            模块1内容
        </view>
        <view class="nav_item" v-if="isActive==1">
            模块2内容
        </view>
        <view class="nav_item" v-if="isActive==2">
            模块3内容
        </view>
        
    </view>

</template>

<script>
    export default {
        data() {
            return {
                isActive: 0,
                dataList:[
                    {
                        index:0,
                        name:"模块1"
                    },
                    {
                        index:1,
                        name:"模块2"
                    },
                    {
                        index:2,
                        name:"模块3"
                    }
                ]
            }
        },
        methods: {
            chenked(index) {
                this.isActive = index;
            },
        }
    }
</script>

<style lang="less">
    .warehousingToBeCon {
        width: 100%;
        background-color: #f2f2f2;

        .nav {
            border-top: 1rpx solid #f2f2f2;
            background-color: #fff;
            background-color: #3F536E;
            .flex_between {
                display: flex;

                .nav_title {
                    height: 88rpx;
                    line-height: 88rpx;
                    width: 100%;
                    text-align: center;
                    font-size: 32rpx;
                    font-family: "PingFang";
                    color: #FFFFFF;
                    padding-bottom: 10px;
                }
            }
        }
    }

    .active {
        position: relative;
        color: #31d378;
    }

    .active::after {
        content: "";
        position: absolute;
        width: 100rpx;
        height: 4rpx;
        background-color: #31d378;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;

    }
    .nav_item{
        width: 100%;
        height: 300rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

 

2、效果图如下：通过点击实现不同模块切换