耐克fff文胸多少钱(十分钟掌握微信小程序开发)
每天分享职场干货、职场案例、和领导同事相处技巧,软件开发心得体会,项目管理感悟。
高仿电商产品分类功能。
效果:
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】
微信小程序轮播图
免责声明:本文章由会员“高俊明”发布如果文章侵权,请联系我们处理,本站仅提供信息存储空间服务如因作品内容、版权和其他问题请于本站联系