在項目中經(jīng)常遇到分類的頁面磅轻，今天有時間就自己單獨做了一個分類的頁面绢片。

image.png

wxml代碼：

<!--左側欄-->
<view class="nav_left">
 <block wx:for="{{cateItems}}">
   <view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
 </block>
</view>
<!--右側欄-->
<view class="nav_right">
 <view wx:if="{{cateItems[curIndex].ishaveChild}}">
   <block wx:for="{{cateItems[curIndex].children}}">
     <view class="nav_right_items">
       <navigator url="../../detail/detail}}">
         <image src="{{item.image}}"></image>
         <text>{{item.name}}</text>
       </navigator>
     </view>
   </block>
 </view>
 <view class="nodata_text" wx:else>該分類暫無數(shù)據(jù)</view>
</view>

wxss代碼：

page{  
  background: #f5f5f5;  
  }  
  /*左側欄主盒子*/  
  .nav_left{  
  display: inline-block;  
  width: 25%;  
  height: 100%;  
  position: fixed;
  background: #f2f2f2;  
  text-align: center;  
  }  
  /*左側欄list的item*/  
  .nav_left .nav_left_items{  
  height: 40px;  
  line-height: 40px;  
  padding: 6px 0;  
  border-bottom: 1px solid #e3e3e3;  
  font-size: 14px; 
  position: relative;
  }  
  /*左側欄list的item被選中時*/  
  .nav_left .nav_left_items.active{  
  background: #fff;  
  color: #ff81e2; 
  }  
  .nav_left .nav_left_items.active::after{
    content: '';
    width: 2px;
    height:52px;
    background: #ff81e2;
    position: absolute;
    left: 0rpx;
    top: 0px;
  }
  /*右側欄主盒子*/  
  .nav_right{  
  position: absolute;  
  top: 0;  
  right: 0;  
  flex: 1;  
  width: 75%;  
  height: 100%;  
  padding: 10px;  
  box-sizing: border-box;  
  background: #fff;  
  }  
  /*右側欄list的item*/  
  .nav_right .nav_right_items{  
  float: left;  
  width: 33.33%;  
  height: 120px;  
  text-align: center;  
  margin-top: 10px;  
  }  
  .nav_right .nav_right_items image{  
  width: 70px;  
  height: 70px;  
  }  
  .nav_right .nav_right_items text{  
  display: block;  
  margin-top: 10px;  
  font-size: 14px;  
  color: black;
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
  } 
  .nodata_text{
  color: black;
  font-size: 14px;  
  text-align: center;  
  }

js代碼：

Page({
  data: {
   cateItems: [
     {
       cate_id: 0,
       cate_name: "新鮮水果",
       ishaveChild: true,//判斷是否有子菜單
       children:
       [
         {
           child_id: 1,
           name: '子菜單',
           url:'details/index',
           image: "http://img95.699pic.com/photo/40008/7712.jpg_wh300.jpg"
         },
         {
           child_id: 2,
           name: '子菜單',
           url:'details/index',
           image: "http://img95.699pic.com/photo/40008/7712.jpg_wh300.jpg"
         },
         {
           child_id: 3,
           name: '子菜單',
           url:'details/index',
           image: "http://img95.699pic.com/photo/40008/7712.jpg_wh300.jpg"
         }
       ]
     },
     {
       cate_id: 1,
       cate_name: "海鮮水產(chǎn)",
       ishaveChild: true,
       children:
       [
         {
           child_id: 1,
           name: '海鮮水產(chǎn)',
           url:'details/index',
           image: "http://demo.demohuo.top/modals/64/6496/demo/images/26.png"
         }
       ]
     },
     {
       cate_id: 2,
       cate_name: "時令鮮蔬",
       ishaveChild: true,
       children:
       [
         {
           child_id: 1,
           name: '時令鮮蔬',
           url:'details/index',
           image: "http://demo.demohuo.top/modals/64/6496/demo/images/28.png"
         }
       ]
     },
     {
       cate_id: 3,
       cate_name: "精選肉禽",
       ishaveChild: true,
       children: [
          {
            child_id: 1,
            name: '精選肉禽',
            url:'details/index',
            image: "http://demo.demohuo.top/modals/64/6496/demo/images/27.png"
          }
        ]
     },
     {
       cate_id: 4,
       cate_name: "牛奶乳品",
       ishaveChild: true,
       children: [
        {
          child_id: 1,
          name: '牛奶乳品',
          url:'details/index',
          image: "http://demo.demohuo.top/modals/64/6496/demo/images/25.png"
        }
       ]
     },
     {
       cate_id: 5,
       cate_name: "糧油副食",
       ishaveChild: true,
       children: [
          {
            child_id: 1,
            name: '糧油副食',
            url:'details/index',
            image: "http://demo.demohuo.top/modals/64/6496/demo/images/24.png"
          }
        ]
     },
     {
       cate_id: 6,
       cate_name: "休閑零食",
       ishaveChild: true,
       children: [
          {
            child_id: 1,
            name: '休閑零食',
            url:'details/index',
            image: "http://demo.demohuo.top/modals/64/6496/demo/images/23.png"
          }
       ]
     },
     {
       cate_id: 7,
       cate_name: "酒水飲料",
       ishaveChild: true,
       children: [
          {
            child_id: 1,
            name: '酒水飲料',
            url:'details/index',
            image: "http://demo.demohuo.top/modals/64/6496/demo/images/22.png"
          }
       ]
     }
   ],
   curNav: 1,
   curIndex: 0
  },
  
  //事件處理函數(shù)  
  switchRightTab: function (e) {
   // 獲取item項的id，和數(shù)組的下標值  
   let id = e.target.dataset.id,
     index = parseInt(e.target.dataset.index);
   // 把點擊到的某一項，設為當前index  
   this.setData({
     curNav: id,
     curIndex: index
   })
  }
  })