uni-app中实现左侧导航栏效果

HTML：

 1  <view class="list">
 2       <!-- 一级 -->
 3       <scroll-view class="list-left" scroll-y :style="‘height:‘+height+‘px‘">
 4             <view v-if="dataList.length>0" class="list-nav" @click="categoryClickMain(item.id,index)" :key="item.id" :class="index==categoryActive?‘active‘:‘‘"
 5              v-for="(item,index) in dataList">
 6               {{item.deptName}}
 7             </view>
 8       </scroll-view>
 9       <!-- 二级 -->
10       <scroll-view class="list-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="‘height:‘+height+‘px‘" scroll-with-animation>
11           <view class="right-nav" @tap="openOrder">
12               {{rightView.deptName}}
13           </view>
14       </scroll-view>
15  </view>

JavaScript：

<script>
    export default {
        data() {
            return {
                dataList: [],
                subList: [],
                height: 0,
                categoryActive: 0,
                scrollTop: 0,
                scrollHeight: 0,
                subs:[],
                rightView:{},
                isShow:true,
                img_url:this.$GLOBAL.BASE_IMG,
                "departmentLevel": 1,
                "gbDepartmentName": "",
                deptName:‘‘,
                isActive: 0 //默认激活的选项卡
            };
        },
        onLoad() {
            this.dataload();
            this.height = uni.getSystemInfoSync().windowHeight;
        },
         methods: {
            categoryClickMain(id,index) {
                this.categoryActive = index;
                let current = this.dataList.find(item => item.id === id);

                if(current) {
                    this.rightView = current.subs[0]
                }
            },
             dataload() { //获取基础数据
                 this.getInspectData();
             },
             getInspectData(options) {
                 let data = {
                      "args": {
                        "areaCode": 10001,
                        "orgCode": 1,
                        "systemCode": 1
                      },
                      "token": "string"
                 }
                 this.$request({
                     url: ‘url‘,
                     data: data,
                     success: (res) => {
                        console.log(‘data===‘,res.data.result)
                        let dataList = [];
                        this.dataList = res.data.result; //一级
                        this.rightView = res.data.result[0].subs[0] //二级
                     },
                 },‘selDepartment‘)
             },
            openOrder() {
                uni.navigateTo({
                    url:‘../order/order‘
                });
            }
          }

效果如下：

点击左边的，右侧显示对应的内容

原文地址：https://www.cnblogs.com/renxiao1218/p/10999365.html