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

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) }})