每天分享职场干货、职场案例、和领导同事相处技巧，软件开发心得体会，项目管理感悟。
高仿电商产品分类功能。
效果：
category.wxss
page, .main {
height: 100%;
}
.categroy-left {
float: left;
width: 20%;
height: 100%;
border-right: 1px solid #ddd;
box-sizing: border-box;
background-color: #f5f5f5;
font-family: "helvetica neue",
"hiragino sans gb",
"microsoft yahei",
"9ed14f53",
arial,
sans-serif;
font-size: 32rpx;
}
.categroy-left .cate-list {
height: 90rpx;
line-height: 90rpx;
text-align: center;
border-left: 3px solid #fff;
}
.categroy-left .cate-list.on {
color: #3aa4ff;
border-color: #3aa4ff;
}
.categroy-right {
float: right;
width: 80%;
height: 100%;
overflow: hidden;
}
.cate-box {
height: 100%;
padding: 40rpx;
box-sizing: border-box;
}
.cate-title {
position: relative;
height: 30rpx;
padding: 30rpx 0 55rpx;
text-align: center;
color: #3aa4ff;
font-size: 28rpx;
}
category.wxml
{{item.name}}
这是{{item.cate}}页面
category.js
page({
data: {
category: [
{ name: '推荐分类', id: 'a0' },
{ name: '男装', id: 'a1' },
{ name: '女装', id: 'a2' },
{ name: '女内衣', id: 'a3' }
],
detail: [
{
"id": "a0",
"cate": "推荐分类",
"detail": []
},
{
"id": "a1",
"cate": "男装",
"detail": []
},
{
"id": "a2",
"cate": "女装",
"detail": []
},
{
"id": "a3",
"cate": "女内衣",
"detail": []
}
],
curindex: 0,
isscroll: false,
toview: 'a0'
},
switchtab(e) {
const self = this;
this.setdata({
isscroll: true,
})
settimeout(function () {
self.setdata({
toview: e.target.dataset.id,
curindex: e.target.dataset.index,
})
}, 100)
settimeout(function () {
self.setdata({
isscroll: false
})
}, 100)
}
})
【end】
微信小程序轮播图