每天分享职场干货、职场案例、和领导同事相处技巧，软件开发心得体会，项目管理感悟。

高仿电商产品分类功能。

效果：

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",

"9ED1F53",

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】本文由微信小程序开发公司撰文发布，转载请注明出处