十分钟掌握微信小程序开发：高仿电商产品分类功能
每天分享职场干货、职场案例、和领导同事相处技巧，软件开发心得体会，项目管理感悟。
高仿电商产品分类功能。
效果：
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",
"\9ED1\4F53",
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.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({
})
}, 100)
setTimeout(function () {
self.setData({
isScroll: false
})
}, 100)
}
})
【END】
本文来自企鹅号 - 洪生鹏媒体
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文来自企鹅号 - 洪生鹏媒体
如有侵权，请联系 cloudcommunity@tencent.com 删除。