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

Posted 2022-01-02 renxiao1218

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‘
                );
            
          

 效果如下：

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