微信实现分类模块

像这样的分类微信小程序怎样做呢？

当然这是两个scroll-view

首先是wxml部分

<!--pages/classify/classify.wxml-->
<view class="VerticalBox">
  <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:{{windowheight}}px">
    <view class="cu-item {{index==TabCur?'text-purple cur':''}}" wx:for="{{tablist}}" wx:key bindtap='tabSelect' data-id="{{index}}" data-card="{{item.id}}">
      {{item.name}}
    </view>
  </scroll-view>
  <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:{{windowheight}}px" scroll-into-view="main-{{MainCur}}" bindscroll="VerticalMain" scroll-top="{{centerNavTop}}">
    <view class="padding-top padding-lr bg-white margin-sm" style="border-radius:20rpx" wx:for="{{goodslist}}" wx:key id="{{index}}">
      <view class='solid-bottom bg-white padding-bottom-sm'>
        <view class='action'>
          <text class='text-black'>{{item.title}}</text>
        </view>
      </view>
      <view class="flex grid col-3  padding-bottom-lg">
        <view class="goodsitems margin-top-lg" bindtap="goodsitems" wx:for="{{item.items}}" wx:for-item="items" wx:for-index="list"   wx:key="{{list}}" for-index="{{list}}"  data-key="{{items.keyword}}">
        <view class="goodsitems"> 
          <view class="goodsimg flex justify-center">
            <image  src="{{items.picture}}"></image>
          </view>
          <view class="text-center">
            {{items.name}}
          </view>
        </view>
      </view>
      </view>
      
    </view>
  </scroll-view>
</view>
           

const app = getApp();
var http = require("../../utils/http.js");
Page({
  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    Custom: app.globalData.Custom,
    TabCur: 0,
    MainCur: 0,
    VerticalNavTop: 0,
    tablist: [],
    goodslist:[],
    listCur:[],
    load: true,
    windowheight:0,
    tabsid:0,
    keyworlds:'',
    defaultID:''
  },
  onLoad() {
    wx.showLoading({
      title: '加载中...',
      mask: true
    });
    this.sortleft()
    this.sortright(wx.getStorageSync('defaultid'))
  },
  //一级分类
  sortleft () {
    var that = this
    http.HttpRequst(true, app.PublicData.URL, 'Catalog/Get1List', app.PublicData.accessToken, '', 'post', false, function (res) {
      console.log(res.list)
      that.setData({
        tablist: res.list,
        defaultID:res.list[0].id
      })
      wx.setStorageSync('defaultid', res.list[0].id)
     })
  },
  sortright (id) {
    var that = this
    http.HttpRequst(true, app.PublicData.URL, 'Catalog/Get2List?parentId=' + id, app.PublicData.accessToken, '', 'post', false, function (res) {
      console.log(res)
      that.setData({
        goodslist: res.list
      })
     })
  },
  onShow () {
    var that = this
    wx.getSystemInfo({
      success (res) {
        console.log(res.windowHeight)
        that.setData({
          windowheight:res.windowHeight
        })
      }
    })
  },
  onReady() {
    wx.hideLoading()
  },
  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      MainCur: e.currentTarget.dataset.card,
      VerticalNavTop: (e.currentTarget.dataset.id-1)*50,
      centerNavTop:0
    })
    this.sortright(e.currentTarget.dataset.card)
  },

  // 点击去搜索
  goodsitems (e) {
    wx.navigateTo({ url: '/pages/index/seachList/seachList'  })
    wx.setStorageSync('paste', e.currentTarget.dataset.key)
  }
})
           

/* pages/classify/classify.wxss */
@import '/colorui.wxss';
.VerticalNav.nav {
  width: 200rpx;
  white-space: initial;
}

.VerticalNav.nav .cu-item {
  width: 100%;
  text-align: center;
  background-color: #fff;
  margin: 0;
  border: none;
  height: 50px;
  position: relative;
}

.VerticalNav.nav .cu-item.cur {
  background-color: #f1f1f1;
  font-size: 33rpx;
  transition: 0.5s all;
}
.VerticalNav.nav .cu-item.cur::after {
  /* content: "";
  width: 8rpx;
  height: 30rpx;
  border-radius: 10rpx 0 0 10rpx;
  position: absolute;
  background-color: currentColor;
  top: 0;
  right: 0rpx;
  bottom: 0;
  margin: auto; */
  content: "";
    width: 8rpx;
    height: 30rpx;
    border-radius: 10rpx 0 0 10rpx;
    position: absolute;
    background-color: currentColor;
    top: 0;
    left: 0rpx;
    bottom: 0;
    margin: auto;
    border-top-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 0px;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}
.VerticalBox{
  display: flex;
}
.VerticalMain{
  background-color: #f1f1f1;
}
.goodsimg > image{
  width: 70%;
  height:100rpx;
}
           

其中我是有引入colorui 的