每天分享职场干货、职场案例、和领导同事相处技巧，软件开发心得体会，项目管理感悟。
高仿电商产品分类功能。
效果：
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
<view class="main">
<view class="categroy-left">
<view wx:for="{{category}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchTab" class="cate-list {{curIndex === index?'on':''}}">
{{item.name}}</view>
</view>
<scroll-view class="categroy-right" scroll-y="{{isScroll}}" scroll-into-view="{{toView}}" scroll-with-animation="true">
<block wx:for="{{detail}}" wx:for-index wx:key="idx">
<view id="{{item.id}}" class="cate-box">
<view class="cate-title">
<text>这是{{item.cate}}页面</text>
</view>
</view>
</block>
</scroll-view>
</view>
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】
微信小程序轮播图