個人覺得商城類小程序某品會和某菇街是做的比較好的，看了一下新電商的商品分類，相對于老的商城那種頂部分類比較新穎，就仿做了一個。

新電商平臺商品分類效果圖（圖片來源蘑菇街，圖侵刪）

蘑菇街商品分類

相對于傳統電商的一行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,
    })
  },

喜歡就點個贊再走唄，轉發請注明出處。