uniapp使用swiper组件自定义左侧菜单栏和切换菜单_uniapp左侧菜单

<template>
    <view style="display: flex;">
        <view class="detail-items">
            <view v-for="(item,index) in items" :class="index == current ? 'active' : ''" @click="onClickItem(index)" class="detail-item">
                <text class="text">{{item}}</text>
            </view>
        </view>
        
        <view class="per_content">
            <view class="detail-content" v-if="current == 0 ? 'hide' : ''">
                <view v-for="i in 15">
                    <view style="margin-top: 50px;">122222</view>
                </view>
            </view>
            <view class="detail-content" v-if="current == 1 ? 'hide' : ''">
                222
            </view>
            <view class="detail-content" v-if="current == 2 ? 'hide' : ''">
                3
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                items: ['基本信息', '系统配置','地图配置','基本信息', '系统配置','地图配置','基本信息', '系统配置','地图配置','基本信息', '系统配置','地图配置','基本信息', '系统配置','地图配置','基本信息', '系统配置','地图配置','基本信息', '系统配置','地图配置','基本信息', '系统配置','地图配置'],
                current: 0,
            }
        },
        methods: {
            //详情和目录切换
            onClickItem(val) {
                this.$data.current = val
            },
        }
    }
</script>

<style>
    .detail-items{overflow-y: auto;height: 100%; background-color: #111111;font-size: 15px;position: fixed; top: 0;left: 0; z-index: 99999;}
    .detail-item{flex:1;}
    .detail-item .text{line-height: 45px; font-size: 13px;padding: 15px;color: #ffffff;;}
    .active .text{background-color: #ff5500;color: #ffffff;font-weight: 600;}
    .per_content{
        background-color: #ffffff;
        padding-left: 90px;
        margin-top: 5px;
    }
</style>