微信小程序 分类页面tab实现 电商常用布局demo

在项目中经常遇到分类的页面，今天有时间就自己单独做了一个分类的页面。

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>该分类暂无数据</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: "海鲜水产",
       ishaveChild: true,
       children:
       [
         {
           child_id: 1,
           name: '海鲜水产',
           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
  },
  
  //事件处理函数  
  switchRightTab: function (e) {
   // 获取item项的id，和数组的下标值  
   let id = e.target.dataset.id,
     index = parseInt(e.target.dataset.index);
   // 把点击到的某一项，设为当前index  
   this.setData({
     curNav: id,
     curIndex: index
   })
  }
  })