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' }); } }

 效果以下：

點擊左邊的，右側顯示對應的內容