微信小程序 三级分类（高仿淘宝页面分类）
**
三级分类（高仿淘宝页面分类）
**
初步的二级页面参考的这个文章的代码：https://blog.csdn.net/luowei85520/article/details/90510311
这个基础上改成的淘宝三级分类
界面：
1、WXML代码
<view class="container">
<!-- 左边的 -->
<scroll-view class='nav_left' scroll-y='true'>
<!-- 一级 -->
<block wx:for="{{cateItems}}" wx:key="{{index}}">
<view class="nav_left_items {{curNav==item.cate_id?'active':''}}" bindtap="switchRightTab" data-index='{{index}}' data-id="{{item.cate_id}}">{{item.cate_name}}</view>
</block>
</scroll-view>
<!-- 右边的 -->
<scroll-view class="nav_right" scroll-y="true">
<!-- 二级 -->
<block wx:for="{{cateItems[curIndex].children}}" wx:key="{{index}}">
<text>{{item.name}}</text>
<!--三级-->
<view class="{{topx}}">
<block wx:for="{{item.son}}" wx:key="{{item.child_id}}">
<view class="nav_right_items" data-id="{{item.son_id}}">
<image src="{{item.image}}"></image>
<text>{{item.name}}</text>
</view>
</block>
</view>
</block>
</scroll-view>
</view>
2、WXSS代码
.container{
position:fixed;
width:100%;
height:100%;
background-color:#FFF;
}
.nav_left{
width:25%;
height:100%;
background:#F2F2F2;
text-align:center;
position:absolute;
top:0;
left:0;
}
.nav_left .nav_left_items{
height:100rpx;
line-height:100rpx;
font-size:28rpx;
}
.nav_left .nav_left_items.active{
position:relative;
background:#FFF;
color:#FF5000;
}
.nav_left .nav_left_items.active::before{
display: inline-block;
width:6rpx;
height:60rpx;
background:#FE5723;
content:'';
position:absolute;
top:20rpx;
left:0;
}
.nav_right{
position:absolute;
top:0;
right:0;
width:75%;
height:100%;
}
.nav_right .nav_right_items{
float: left;
width: 33.33%;
text-align: center;
padding:30rpx 0;
}
.nav_right .nav_right_items image{
width: 120rpx;
height: 120rpx;
}
.nav_right .nav_right_items text{
display: block;
margin-top: 20rpx;
font-size: 28rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nocate{
padding:100rpx;
text-align: center;
}
.nocate image{
width:70rpx;
height:70rpx;
}
.nocate text{
font-size:28rpx;
display:block;
color:#BBB;
}
/*隐藏滚动条*/
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.topx {
width: 90%;
/* height: 700rpx; */
margin: 30rpx auto;
z-index: 1;
border-radius: 10rpx;
background-image: url(https://wx2.sinaimg.cn/mw1024/006cV2kkly1g8atticb9nj30yj22omye.jpg);
background-size: cover;
}
3、JS数据
Page({
/**
* 页面的初始数据
*/
data: {
//一级
cateItems:[
{
cate_id:1,
cate_name:'女装',
//二级
children: [
{
child_id: 1,
name: '猜你喜欢',
//三级
son:[
{
son_id:1,
name:'牛仔裙',
image:'../../images/jeanskirt.png'
},
{
son_id:2,
name:'短外套',
image:'../../images/overcoa.png'
},
{
son_id:3,
name:'吊带裙',
image:'../../images/dress.png'
},
{
son_id:4,
name:'连衣裙',
image:'../../images/dress(1).png'
},
{
son_id:5,
name:'时尚套装',
image:'../../images/suit.png'
},
{
son_id:6,
name:'衬衫',
image:'../../images/shirt.png'
},
{
son_id:7,
name:'T恤',
image:'../../images/Tshirt.png'
},
{
son_id:8,
name:'卫衣',
image:'../../images/sweater.png'
},
{
son_id:9,
name:'休闲裤',
image:'../../images/pants.png'
}
]
},
{
child_id: 2,
name: '流行趋势',
son:[
{
son_id:1,
name:'方领连衣裙',
image:'../../images/squarecollardress.png'
},
{
son_id:2,
name:'泡泡袖',
image:'../../images/puffdress.png'
},
{
son_id:3,
name:'西装连衣裙',
image:'../../images/westerndress.png'
},
{
son_id:4,
name:'洛丽塔',
image:'../../images/Lolita.png'
},
{
son_id:5,
name:'JK制服',
image:'../../images/jkdress.png'
},
{
son_id:6,
name:'束脚裤',
image:'../../images/anklepants.png'
}
]
},
{
child_id: 3,
name: '女裙',
son:[
{
son_id:1,
name:'连衣裙',
image:'../../images/dress(1).png'
},
{
son_id:2,
name:'半身裙',
image:'../../images//jkdress.png'
},
{
son_id:3,
name:'旗袍',
image:'../../images/chipao.png'
},
]
},
{
child_id: 4,
name: '外套',
son:[
{
son_id:1,
name:'短外套',
image:'../../images/suit.png'
},
{
son_id:2,
name:'风衣',
image:'../../images/windbreaker.png'
},
{
son_id:3,
name:'西装',
image:'../../images/westerndress.png'
},
{
son_id:4,
name:'毛呢大衣',
image:'../../images/clothes.png'
},
{
son_id:5,
name:'棉衣棉服',
image:'../../images/clothes.png'
},
{
son_id:6,
name:'羽绒服',
image:'../../images/clothes.png'
},
{
son_id:7,
name:'皮草',
image:'../../images/clothes.png'
},
{
son_id:8,
name:'皮衣',
image:'../../images/clothes.png'
},
{
son_id:9,
name:'皮衣',
image:'../../images/clothes.png'
}
]
},
{
child_id: 5,
name: '上装',
son:[
{
son_id:1,
name:'T恤',
image:'../../images/clothes.png'
},
{
son_id:2,
name:'衬衫',
image:'../../images/clothes.png'
},
{
son_id:3,
name:'雪纺衫',
image:'../../images/clothes.png'
},
{
son_id:4,
name:'卫衣',
image:'../../images/clothes.png'
},
{
son_id:5,
name:'毛衣',
image:'../../images/clothes.png'
},
{
son_id:6,
name:'马甲',
image:'../../images/clothes.png'
},
],
},
{
child_id: 6,
name: '特色女装',
son:[
{
son_id:1,
name:'中老年女装',
image:'../../images/clothes.png'
},
{
son_id:2,
name:'大码女装',
image:'../../images/clothes.png'
},
{
son_id:3,
name:'皮衣',
image:'../../images/clothes.png'
}
]
},
{
child_id: 7,
name: '女裤',
son:[
{
son_id:1,
name:'休闲裤',
image:'../../images/clothes.png'
},
{
son_id:2,
name:'牛仔裤',
image:'../../images/clothes.png'
},
{
son_id:3,
name:'打底裤',
image:'../../images/clothes.png'
},
{
son_id:4,
name:'西装裤',
image:'../../images/clothes.png'
},
{
son_id:5,
name:'棉裤羽绒裤',
image:'../../images/clothes.png'
},
{
son_id:6,
name:'皮衣',
image:'../../images/clothes.png'
}
]
},
{
child_id: 8,
name: '套装',
son:[
{
son_id:1,
name:'时尚套装',
image:'../../images/clothes.png'
},
{
son_id:2,
name:'运动套装',
image:'../../images/clothes.png'
},
{
son_id:3,
name:'皮衣',
image:'../../images/clothes.png'
}
]
},
{
child_id: 9,
name: '服饰服务',
son:[
{
son_id:1,
name:'洗衣服务',
image:'../../images/clothes.png'
},
]
},
]
},
{
cate_id:2,
cate_name:'美妆',
children: [
{
child_id: 1,
name: '猜你喜欢',
son:[
{
son_id:1,
name:'彩妆套装',
image:'../../images/makeup.png'
},
{
son_id:2,
name:'粉饼',
image:'../../images/makeup.png'
},
{
son_id:3,
name:'甲片',
image:'../../images/makeup.png'
},
{
son_id:4,
name:'指甲贴',
image:'../../images/makeup.png'
},
{
son_id:5,
name:'粉底液',
image:'../../images/makeup.png'
},
{
son_id:6,
name:'美甲',
image:'../../images/makeup.png'
},
{
son_id:7,
name:'防晒霜',
image:'../../images/makeup.png'
},
{
son_id:8,
name:'口红',
image:'../../images/makeup.png'
},
{
son_id:9,
name:'面膜',
image:'../../images/makeup.png'
},
]
},
{
child_id: 2,
name: '美容美体',
son:[
{
son_id:1,
name:'彩妆套装',
image:'../../images/makeup2.png'
},
{
son_id:2,
name:'粉饼',
image:'../../images/makeup2.png'
},
{
son_id:3,
name:'甲片',
image:'../../images/makeup2.png'
},
{
son_id:4,
name:'指甲贴',
image:'../../images/makeup2.png'
},
{
son_id:5,
name:'粉底液',
image:'../../images/makeup2.png'
},
{
son_id:6,
name:'美甲',
image:'../../images/makeup2.png'
},
{
son_id:7,
name:'防晒霜',
image:'../../images/makeup2.png'
},
{
son_id:8,
name:'口红',
image:'../../images/makeup2.png'
},
{
son_id:9,
name:'面膜',
image:'../../images/makeup2.png'
},
]
},
{
child_id: 3,
name: '彩妆',
son:[
{
son_id:1,
name:'彩妆套装',
image:'../../images/makeup3.png'
},
{
son_id:2,
name:'粉饼',
image:'../../images/makeup3.png'
},
{
son_id:3,
name:'甲片',
image:'../../images/makeup3.png'
},
{
son_id:4,
name:'指甲贴',
image:'../../images/makeup3.png'
},
{
son_id:5,
name:'粉底液',
image:'../../images/makeup3.png'
},
{
son_id:6,
name:'美甲',
image:'../../images/makeup3.png'
},
{
son_id:7,
name:'防晒霜',
image:'../../images/makeup3.png'
},
{
son_id:8,
name:'口红',
image:'../../images/makeup3.png'
},
{
son_id:9,
name:'面膜',
image:'../../images/makeup3.png'
},
]
}
]
},
{
cate_id:3,
cate_name:'饰品'
},
{
cate_id: 4,
cate_name: '百货'
},
{
cate_id: 5,
cate_name: '医药'
},
{
cate_id: 6,
cate_name: '进口'
},
{
cate_id: 7,
cate_name: '手机'
},
{
cate_id: 8,
cate_name: '箱包'
},
{
cate_id: 9,
cate_name: '鞋靴'
},
{
cate_id: 10,
cate_name: '内衣'
},
{
cate_id: 11,
cate_name: '母婴'
},
{
cate_id: 12,
cate_name: '男装'
},
{
cate_id: 13,
cate_name: '食品'
}
],
curNav:1,
curIndex:0,
},
switchRightTab:function(e){
let id = e.target.dataset.id,index=e.target.dataset.index;
this.setData({
curNav:id,
curIndex:index,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})