【微信小程序】仿某品会某菇街商城商品分类

个人觉得商城类小程序某品会和某菇街是做的比较好的，看了一下新电商的商品分类，相对于老的商城那种顶部分类比较新颖，就仿做了一个。

新电商平台商品分类效果图（图片来源蘑菇街，图侵删）

蘑菇街商品分类

相对于传统电商的一行title右滑，感觉是我喜欢的风格，挺简洁好看的。
蘑菇街的商品分类分为两部分，左边为商品的所有分类，右边为每个分类对应的商品细分并加上推荐的一些商品。要注意的是：

左边的商品种类是固定的高度（屏幕高度 - 已用的屏幕高度），在当前页可以看完所有分类，没有遮挡住分类，用户体验好。
右边的就是可滑动的，注意是在给定的高度范围内滑动，用scroll-view，左右不影响。

挺简单的~先上我的效果图

上代码，有时候为了方便修改及看效果，某些样式我写在了页面中，习惯不好大家不要学哈。图标去阿里巴巴矢量图标库找合适的就好了。代码大家自己修改一下使用，左边商品分类我加了点击效果，还要在每次点击时清空右边的数据重新加载更新，因为没有接口有点麻烦就没有做。

【WXML】

<view class='positonNav'>
  <view class='horizontal '>
    <view class='item'>
      <view class='horizontal' style='background:#efefef;padding:4px 8px;'>
        <view style='width:40rpx;height:40rpx;margin:auto;padding-right:8px;'>
          <image src='../../imgs/search.png' style='width:100%;height:100%;'></image>
        </view>
        <view class='item'>
          <input placeholder='原宿风学生上衣' placeholder-style='color:#999;font-size:14px;'></input>
        </view>
      </view>
    </view>
    <view style='width:40rpx;height:40rpx;margin:auto;padding-left:10px;'>
      <image src='../../imgs/message.png' style='width:100%;height:100%;'></image>
    </view>
  </view>
</view>
<view style='width:100%;height:2px;background:#eee;'></view>
<view class='horizontal'>
  <view style='height: {{img_height}}px;width:20%;'>
    <view class='vertical'>
      <view wx:for='{{titlrBar}}' style='height: {{img_height/15}}px;line-height:{{img_height/15}}px;{{item === option ? "background: #fff;border-left:1px solid #f95a70;" : "background: #efefef;"}};text-align:center;' bindtap='clickTitle' data-title='{{item}}'>
        <text style='font-size: 14px;color:#000;{{item === option ? "color: #f95a70;font-weight: bold;" : "color: #333;"}}'>{{item}}</text>
      </view>
    </view>
  </view>
  <view class='item'>
    <scroll-view scroll-y style='height: {{img_height}}px;'>
      <view class='horizontal wrap'>
        <view wx:for='{{menu}}' class='menuView'>
          <view class='vertical'>
            <view class='item'>
              <view class='mune_img_view'>
                <image src='{{item.img}}'/>
              </view>
            </view>
            <view class='menu_text_view'>
              <text>{{item.name}}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

【WXSS】

.positonNav {
  top: 0px;
  position: sticky;
  position: -webkit-sticky;
  background-color: #fff;
  z-index: 9999;
  padding: 10px ;
}
.mune_img_view{
  width: 60px; 
  height: 60px; 
  margin: auto;
}
.mune_img_view > image{
  width: 100%; 
  height: 100%;
}
.menu_text_view{
  text-align: center; 
}
.menu_text_view > text{
  font-size: 14px; 
  color: #666;
}
.menuView{
  width: 33.3%; 
  padding: 5px 0;
}
.horizontal{
  display: flex;
  flex-direction: row;
}
.vertical{
  display: flex;
  flex-direction: column;
}
.item{
  flex: 1; 
}

之前漏了两个样式，补上

.nowrap {
  white-space: nowrap;
}

.wrap {
  flex-wrap: wrap;
}

【JS】

  data: {
    titlrBar:[
      '正在流行',
      '女装',
      '套装',
      '裙裤',
      '上衣',
      '家居',
      '女鞋',
      '男士',
      '母婴',
      '内衣',
      '美妆',
      '运动',
      '包包',
      '配饰',
      '食品'
    ],
    img_height:1,
    option:'正在流行',
    menu:[
      { name: '大衣', img: '../../imgs/dress/dayi.png' },
      { name: '牛仔裤', img: '../../imgs/dress/niuzhai.png' },
      { name: '连衣裙', img: '../../imgs/dress/lianyiqun.png' },
      { name: '秋裤', img: '../../imgs/dress/qiuku.png' },
      { name: '衬衫', img: '../../imgs/dress/chenshan.png' },
      { name: '帽子', img: '../../imgs/dress/maozi.png' },
      { name: '毛衣', img: '../../imgs/dress/maoyi.png' },
      { name: '大衣', img: '../../imgs/dress/dayi.png' },
      { name: '牛仔裤', img: '../../imgs/dress/niuzhai.png' },
      { name: '连衣裙', img: '../../imgs/dress/lianyiqun.png' },
      { name: '秋裤', img: '../../imgs/dress/qiuku.png' },
      { name: '衬衫', img: '../../imgs/dress/chenshan.png' },
      { name: '帽子', img: '../../imgs/dress/maozi.png' },
      { name: '毛衣', img: '../../imgs/dress/maoyi.png' },
      { name: '大衣', img: '../../imgs/dress/dayi.png' },
      { name: '牛仔裤', img: '../../imgs/dress/niuzhai.png' },
      { name: '连衣裙', img: '../../imgs/dress/lianyiqun.png' },
      { name: '秋裤', img: '../../imgs/dress/qiuku.png' },
      { name: '衬衫', img: '../../imgs/dress/chenshan.png' },
      { name: '帽子', img: '../../imgs/dress/maozi.png' },
      { name: '毛衣', img: '../../imgs/dress/maoyi.png' },
      { name: '毛衣', img: '../../imgs/dress/maoyi.png' },
      { name: '毛衣', img: '../../imgs/dress/maoyi.png' },
    ]
  },

  onLoad: function (options) {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          img_height: res.windowHeight -56,
        })
      }
    })
  },

  clickTitle:function(e){
    let that = this
    that.setData({
      option: e.currentTarget.dataset.title,
    })
  },

喜欢就点个赞再走呗，转发请注明出处。

【微信小程序】仿某品会某菇街商城商品分类

推荐阅读更多精彩内容