<!--主盒子--> <view class="container">  <!--左側欄-->  <view class="nav_left">  <block wx:for="{{navLeftItems}}">  <!--當前項的id等于item項的id，那個就是當前狀態-->  <!--用data-index記錄這個數據在數組的下標位置，使用data-id設置每個item的id值，供打開2級頁面使用-->  <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>  </block>  </view>  <!--右側欄-->  <view class="nav_right">  <!--如果有數據，才遍歷項-->  <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">  <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">  <view class="nav_right_items">   <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">   <!--用view包裹圖片組合，如果有圖片就用，無圖片提供就使用50x30的這個默認圖片-->   <view>    <block wx:if="{{item.tree.logo}}">   <image src="{{item.tree.logo}}"></image>   </block>   <block wx:else>   <image src="http://temp.im/50x30"></image>   </block>   </view>   <!--如果有文字，就用文字；無文字就用其他-->   <view wx:if="{{item.tree.desc}}">   <text>{{item.tree.desc}}</text>   </view>   <view wx:else>   <text>{{item.tree.desc2}}</text>   </view>   </navigator>  </view>  </block>  </view>  <!--如果無數據，則顯示數據-->  <view wx:else>暫無數據</view>  </view> </view> 

page{  background: #f5f5f5; } /*總體主盒子*/ .container {  position: relative;  width: 100%;  height: 100%;  background-color: #fff;  color: #939393; }  /*左側欄主盒子*/ .nav_left{  /*設置行內塊級元素（沒使用定位）*/  display: inline-block;  width: 25%;  height: 100%;  /*主盒子設置背景色為灰色*/  background: #f5f5f5;  text-align: center; } /*左側欄list的item*/ .nav_left .nav_left_items{  /*每個高30px*/  height: 30px;  /*垂直居中*/  line-height: 30px;  /*再設上下padding增加高度，總高42px*/  padding: 6px 0;  /*只設下邊線*/  border-bottom: 1px solid #dedede;  /*文字14px*/  font-size: 14px; } /*左側欄list的item被選中時*/ .nav_left .nav_left_items.active{  /*背景色變成白色*/  background: #fff; }  /*右側欄主盒子*/ .nav_right{  /*右側盒子使用了絕對定位*/  position: absolute;  top: 0;  right: 0;  flex: 1;  /*寬度75%，高度占滿，并使用百分比布局*/  width: 75%;  height: 100%;  padding: 10px;  box-sizing: border-box;  background: #fff; } /*右側欄list的item*/ .nav_right .nav_right_items{  /*浮動向左*/  float: left;  /*每個item設置寬度是33.33%*/  width: 33.33%;  height: 80px;  text-align: center; } .nav_right .nav_right_items image{  /*被圖片設置寬高*/  width: 50px;  height: 30px; } .nav_right .nav_right_items text{  /*給text設成塊級元素*/  display: block;  margin-top: 5px;  font-size: 10px;  /*設置文字溢出部分為...*/  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis; } 

Page({  data: {  navLeftItems: [],  navRightItems: [],  curNav: 1,  curIndex: 0  },  onLoad: function() {  // 加載的使用進行網絡訪問，把需要的數據設置到data數據對象  var that = this   wx.request({   url: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList',   method: 'GET',   data: {},   header: {   'Accept': 'application/json'   },   success: function(res) {   console.log(res)   that.setData({    navLeftItems: res.data,    navRightItems: res.data   })   }  })  },   //事件處理函數  switchRightTab: function(e) {  // 獲取item項的id，和數組的下標值  let id = e.target.dataset.id,   index = parseInt(e.target.dataset.index);  // 把點擊到的某一項，設為當前index  this.setData({   curNav: id,   curIndex: index  })  }  })