微信小程序左侧竖形滑动菜单（仿淘宝分类界面）

界面如下：

1、category.js中data初始化的数据（模拟），如果是跟后台数据库挂钩，可以用wx.request请求返回相似的对象数组再绑定到cartItems中。

data: {
    cateItems:[
      {
        cate_id:1,
        cate_name:'洗护',
        children: [
          { 
            child_id: 1, 
            name: '洁面皂', 
            image: "../../images/thumbnail/1.jpg" 
          }, 
          { 
            child_id: 2, 
            name: '卸妆', 
            image: "../../images/thumbnail/2.jpg"  
          }
        ]
      },
      {
        cate_id:2,
        cate_name:'生鲜'
      },
      {
        cate_id:3,
        cate_name:'食品'
      },
      {
        cate_id: 4,
        cate_name: '女装'
      },
      {
        cate_id: 5,
        cate_name: '百货'
      },
      {
        cate_id: 6,
        cate_name: '母婴'
      },
      {
        cate_id: 7,
        cate_name: '手机'
      },
      {
        cate_id: 8,
        cate_name: '鞋靴'
      },
      {
        cate_id: 9,
        cate_name: '运动'
      },
      {
        cate_id: 10,
        cate_name: '美家'
      },
      {
        cate_id: 11,
        cate_name: '男装'
      },
      {
        cate_id: 12,
        cate_name: '水果'
      },
      {
        cate_id: 13,
        cate_name: '电子'
      }
    ],
    curNav:1,
    curIndex:0
  },

  switchRightTab:function(e){
    let id = e.target.dataset.id,index=e.target.dataset.index;
    this.setData({
      curNav:id,
      curIndex:index
    })
  },

category.wxml

  
    
      {{item.cate_name}}
    
  
  
    
    
      
        
        
          
            
            {{item.name}}
          
        
      
    
    
    
      
      该分类暂无数据
    
  

category.wxss

.container{
  position:fixed;
  width:100%;
  height:100%;
  background-color:#FFF;
}
.nav_left{
  width:25%;
  height:100%;
  background:#F2F2F2;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
}
.nav_left .nav_left_items{
  height:100rpx;
  line-height:100rpx;
  font-size:28rpx;
}
.nav_left .nav_left_items.active{
  position:relative;
  background:#FFF;
  color:#FF5000;
}
.nav_left .nav_left_items.active::before{
  display: inline-block;
  width:6rpx;
  height:60rpx;
  background:#FE5723;
  content:'';
  position:absolute;
  top:20rpx;
  left:0;
}
.nav_right{
  position:absolute;
  top:0;
  right:0;
  width:75%;
  height:100%;
}

.nav_right .nav_right_items{
  float: left;   
  width: 33.33%; 
  text-align: center;  
  padding:30rpx 0;
} 
.nav_right .nav_right_items image{
  width: 120rpx;  
  height: 120rpx; 
} 
.nav_right .nav_right_items text{
  display: block;  
  margin-top: 20rpx;  
  font-size: 28rpx;  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
} 
.nocate{
  padding:100rpx;
  text-align: center;  
} 

.nocate image{
  width:70rpx;
  height:70rpx;
}
.nocate text{
  font-size:28rpx;
  display:block;
  color:#BBB;
}
/*隐藏滚动条*/
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

相关文章：

微信小程序固定标签导航，点击标签滑动到相应内容，滚动内容切换相应标签

微信小程序 在tabBar某一项的右上角添加文本（购物车数量）