个人觉得商城类小程序某品会和某菇街是做的比较好的，看了一下新电商的商品分类，相对于老的商城那种顶部分类比较新颖，就仿做了一个。
新电商平台商品分类效果图（图片来源蘑菇街，图侵删）
蘑菇街商品分类
相对于传统电商的一行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,
})
},
喜欢就点个赞再走呗，转发请注明出处。
