微信小程序的产品分类显示的实现

wxml:

     
        
        {{item.preX}}
        
     
     
        
        
           
              
              {{item.name}}
           
        
        
     
  

wxss:

/* tab选项卡 */
.tab-container{
  position:relative;
}
.tab-list{
  width:200rpx;
  height:550rpx;
 
}
.tab-list>view{
  width:100%;
  height:110rpx;
  line-height:110rpx;
  text-align:center;
  font-size:32rpx;
}
.noclick{
  background:#f9f9f9;
  color:#333333;
}
.click{
  background:#fff;
  color:#ff7e00;
}
.tab-detail{
  position:absolute;
  top:10rpx;
  left:200rpx;
  width:550rpx;
  box-sizing:border-box;
  background:#fff;
}

/* 商品详情 */
.tab-item{
  width:180rpx;
  height:180rpx;
  text-align:center;
  font-size:30rpx;
  float:left;
}
.tab-item>image{
  width:125rpx;
  height:125rpx;
  display:block;
  margin:0 auto;
}

js:

page({
   data:{
      pres: [
      {    id:"0",
        preX: "推荐分类"   },
      {    id: "1",
        preX: "食品生鲜"   },
      {    id: "2",
        preX: "潮流女装"   },
       {    id: "3",      
         preX: "品牌男装"  },
       {   id: "4",
         preX: "医疗器械"  }
    ],
    goods:[
      { id: 0, name: "苹果", url:"/img/1.png"},
      { id: 1, name: "香蕉", url: "/img/2.png"},
    ],
    id: 0,
   },
  // 单击改变样式
  click: function (e) {
    var ids = e.currentTarget.dataset.id;  //获取自定义的id 
    var good = "";  
    if(ids == 0){
      good = [
        { id: 0, name: "苹果", url: "/img/1.png" },
        { id: 1, name: "香蕉", url: "/img/2.png" },

      ];
    } else if (ids == 1){
      good = [
        { id: 0, name: "芒果", url: "/img/3.png" },
        { id: 1, name: "葡萄", url: "/img/4.png" },

      ];
      } else if (ids == 2) {
      good = [
        { id: 0, name: "火龙果", url: "/img/5.png" },
        { id: 1, name: "猕猴桃", url: "/img/6.png" },

      ]; 
      }else if (ids == 3) {
        good = [
          { id: 0, name: "黑加仑", url: "/img/7.png" },
          { id: 1, name: "牛油果", url: "/img/8.png" },

        ];
    }else if(ids == 4){
      good = [
         { id: 0, name: "苹果", url: "/img/1.png" },
        { id: 1, name: "芒果", url: "/img/3.png" },

      ];
    }
    this.setData({
      id: ids,  //把获取的自定义id赋给当前组件的id(即获取当前组件)  
      goods: good
    })
  },