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

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

要点：

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

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

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

<view class="classify">
 
  <!--分类导航栏-->
  <scroll-view class='left-navbar' scroll-y="true">
    <view wx:for="{{screenArray}}" class="{{ currentTab == index ? 'active' : '' }}" wx:key="unique" bindtap="{{ currentTab != index ? 'navbarTap':'' }}" id="{{index}}" data-screenId="{{item.screenId}}">{{item.screenName}}
    </view>
  </scroll-view>
  <scroll-view id="right" scroll-y="true" scroll-top="{{scrollTop}}">
    <!--顶部图片-->
    <view class="goods-banner">
      <image class="img-banner" src="{{childrenArray.showImageUrl}}" wx:if="{{childrenArray.showImageUrl}}" mode="scaleToFill"></image>
    </view>
    <!--商品展示-->
    <view class="goods-list" wx:for="{{childrenArray.childrenScreenArray}}" wx:key="unique">
      <view class="goods-title">{{item.screenName}}</view>
      <view wx:for="{{item.childrenScreenArray}}" class="goods" wx:key="unique" bindtap="ToSearchResult" id="{{item.screenName}}" >
        <image class="img" src="{{item.showImageUrl}}" wx:if="{{item.showImageUrl}}"></image>
        <text>{{item.screenName}}</text>
      </view>
    </view>
  </scroll-view>
 
</view>

Page({
  data: {
    currentTab: 0,  //对应样式变化
    scrollTop: 0,  //用作跳转后右侧视图回到顶部
    screenArray: [
      {
        screenId:1,
        screenName:'菜单1'
      },
      {
        screenId: 2,
        screenName: '菜单2'
      },
      {
        screenId: 3,
        screenName: '菜单3'
      },
      {
        screenId: 4,
        screenName: '菜单4'
      },
      {
        screenId: 5,
        screenName: '菜单5'
      },
      {
        screenId: 6,
        screenName: '菜单6'
      }
    ], //左侧导航栏内容
    screenId: "",  //后台查询需要的字段
    childrenArray: {
      showImageUrl: 'http://img3.imgtn.bdimg.com/it/u=1798233457,4143585420&fm=26&gp=0.jpg',
      childrenScreenArray: [
        {
          screenName: '休闲零食',
          childrenScreenArray: [
            {
              screenId: 1,
              showImageUrl: 'http://img0.imgtn.bdimg.com/it/u=921197123,1741426939&fm=26&gp=0.jpg',
              screenName: '糖果'
            },
            {
              screenId: 2,
              showImageUrl: 'http://img3.imgtn.bdimg.com/it/u=46574630,3801160495&fm=26&gp=0.jpg',
              screenName: '*核桃'
            },
            {
              screenId: 2,
              showImageUrl: 'http://img3.imgtn.bdimg.com/it/u=46574630,3801160495&fm=26&gp=0.jpg',
              screenName: '*核桃'
            },
            {
              screenId: 2,
              showImageUrl: 'http://img3.imgtn.bdimg.com/it/u=46574630,3801160495&fm=26&gp=0.jpg',
              screenName: '*核桃'
            },
          ]
        },
        {
          screenName: '手机数码',
          childrenScreenArray: [
            {
              screenId: 1,
              showImageUrl: 'http://img0.imgtn.bdimg.com/it/u=1138662413,2627006305&fm=26&gp=0.jpg',
              screenName: 'vivo手机'
            },
            {
              screenId: 1,
              showImageUrl: 'http://img0.imgtn.bdimg.com/it/u=1138662413,2627006305&fm=26&gp=0.jpg',
              screenName: 'vivo手机'
            },
          ]
        },
      ]
    }, //右侧内容
  },

  onLoad: function (options) {
    var that = this;
    
  },

  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;

  },
})

/**分类栏**/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.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;
}