【微信小程序】仿京东商品分类界面

图示：（京东左）

要点：

1、左右两侧可以各自滑动，互不影响 → absolute布局

2、商品根据不同数量自适应排列 → flex-wrap的应用

3、切换左侧导航后，右侧显示对应变化，且默认显示在顶部位置 →  scroll-view标签，设置scroll-top值为0

代码：

  
  
    {{item.screenName}}
    
    
    
  

  
    
    
      
    
    
    
      {{item.screenName}}
      
        
        {{item.screenName}}
      
    

    

  

/**分类栏**/
.classify{
  margin-top:100rpx;
}
.left-navbar{
  position:absolute;
  left:0;
  width:25%;
  height:90%;
  background-color:#eee;
  font-size:15px;
}
.left-navbar view{
  height:80rpx;
  line-height: 80rpx;
  text-align:center;
}
.active{
  background-color:#FFF;
  color:red;
  font-size:17px;
}
#right{
  position:absolute;
  right:0;
  width:75%;
  height:90%;
}
.img-banner{
  height:150rpx;
  width:100%;
}
.goods-list{
  display:flex;
  flex-wrap:wrap;
  margin-top:30rpx;
}
.goods-title{
  width:100%;
  font-size:15px;
  font-weight:bold;
  padding-left:10rpx;
}
.goods{
  width:150rpx;
  font-size:14px;
  margin:15rpx;
  text-align:center;
}
.img{
  width:140rpx;
  height:140rpx;
}

Page({
  data: {
    currentTab: 0,  //对应样式变化
    scrollTop:0,  //用作跳转后右侧视图回到顶部
    screenArray:[], //左侧导航栏内容
    screenId:"",  //后台查询需要的字段
    childrenArray:[], //右侧内容
  },
  
  onLoad: function (options) {
    var that = this;
    //获得分类筛选
    request.sendRrquest(API_queryClassify, 'POST', { flag: 0 }, )
      .then(function (res) {
        console.log("返回数据：");
        var screenArray = res.data.data.screenArray;
        var screenId = screenArray[0].screenId;
        that.setData({
          screenArray: screenArray,
          screenId: screenId,
        })
        console.log(screenArray);
        request.sendRrquest(API_queryClassify, 'POST', { flag:1, screenId:screenId }, )
          .then(function (res) {
            console.log("返回数据：");
            that.setData({
              childrenArray: res.data.data.screenArray[0],
            })
            console.log(that.data.childrenArray);
          }, function (error) {console.log("返回失败");});
      },function (error) {console.log("返回失败");});
  },

  navbarTap:function(e){
    var that = this;
    console.log(e);
    this.setData({
      currentTab: e.currentTarget.id,   //按钮CSS变化
      screenId: e.currentTarget.dataset.screenid,
      scrollTop: 0,   //切换导航后，控制右侧滚动视图回到顶部
    })
    //刷新右侧内容的数据
    var screenId = this.data.screenId;
    request.sendRrquest(API_queryClassify, 'POST', { flag: 1, screenId: screenId }, )
      .then(function (res) {
        console.log("返回数据：");
        that.setData({
          childrenArray: res.data.data.screenArray[0],
        })
        console.log(that.data.childrenArray);
      }, function (error) { console.log("返回失败"); });
  },
})