分类

<search></search>
<view class="cates">
    <scroll-view class="leftmenu" scroll-y>
        <view wx:for="{{leftmenu}}" bind:tap="tapitem" data-index="{{index}}" class="leftitem {{sindex==index?'active':''}}">{{item}}</view>
    </scroll-view>
    <scroll-view class="rightcontent" scroll-y scroll-top="0">
        <view wx:for="{{rightcontent}}" wx:for-item="item1" wx:for-index="index1">
            <view class="title">
                <view>/</view>
                <view>{{item1.cat_name}}</view>
                <view>/</view>
            </view>
            <navigator wx:for="{{item1.children}}" wx:for-item="item2" wx:for-index="index2" class="nav_item">
                <image class="pic" src="{{item2.cat_icon}}" mode="widthFix"></image>
                <view>{{item2.cat_name}}</view>
            </navigator>
        </view>
    </scroll-view>
</view>

Page({
  data: {
    leftmenu: [],
    rightcontent: [],
    sindex: 0 
  },
  cates: [],
  onLoad: function(options) {
    let that = this
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
      success(res) {
        that.cates = res.data.message
        that.setData({
          leftmenu: that.cates.map(v => v.cat_name),
          rightcontent: that.cates[0].children
        })
        console.log(res)
      }
    })
  },
  tapitem(e) {
    let index = e.currentTarget.dataset.index
    this.setData({
      sindex: index,
      rightcontent: this.cates[index].children
    })
  }
})

.cates{
  display: flex;
  margin-top: 110rpx;
  height: calc(100vh - 110rpx);
}
.leftmenu{
  flex: 2;
}
.leftitem{
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 30rpx;
}
.rightcontent{
  flex: 5;
 
}
.active{
  color: red;
  border-left: 5rpx solid red;
}
.title{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
.nav_item{
  width: 33.3%;
  display: inline-block;

}
.pic{
  width: 70%;
  height: 100%;
  display: block;
  margin: 0 auto;
}
.nav_item view{
  font-size: 25rpx;
  text-align: center;
}