实现思路：使用滚动视图scroll-view及滑块视图swiper实现页面两列纵向布局，通过滚动视图点击改变当前滑块视图的索引值current来实现一级菜单点击切换对应二级菜单目录。
效果截图：

1、WXML代码：

<view class="menu-content">
  <view class="menu-container">
    <scroll-view scroll-y="true" class="scroll-view">
      <view class="scroll-view-list">
        <block wx:for="{{detail}}" wx:for-item="item" wx:key="index">
          <view class="scroll-view-item {{indexSize === index?'active':''}}" bindtap="chooseTypes" data-index="{{index}}">{{item.name}}</view>
        </block>
      </view>
    </scroll-view>
  </view>
  <swiper class="container-list" current="{{indexSize}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" duration="{{duration}}">
    <swiper-item wx:for="{{detail}}" wx:for-item="item" wx:key="index">
      <scroll-view scroll-y="true" class="swiper-view-list">
        <view class="swiper-view-item">
          <view class="view-item-title overflow">{{item.name}}全部分类</view>
        </view>
        <view class="swiper-view-item" wx:for="{{detail[indexSize].children}}" wx:key="index">
          <view class="view-item-title overflow" data-cid='{{item.id}}' data-cname="{{item.name}}" bindtap='chooseSecondMenu' hover-class='this-check'>{{item.name}}</view>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

2、WXSS代码：

.overflow{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;}
.menu-content{display:flex;width:100%;position:absolute;bottom:0rpx;left:0;top:0;overflow:hidden}
.menu-container{width:250rpx;flex:0 0 250rpx;background:#f2f2f2}
.scroll-view{width:100%;height:100%}
.scroll-view-list{width:100%;height:100%}
.scroll-view-item{height:110rpx;width:100%;font-size:30rpx;color:#666;border-left:8rpx solid transparent;display:flex;align-items:center;justify-content:center;position:relative;font-weight:700}
.scroll-view-item:after{content:'';left:0;right:0;bottom:0;height:2rpx;background-color:#dfdfdf;transform:scaleY(.5);position:absolute}
.scroll-view-item.active{background:#fff;color:#0eb6c6;border-left:8rpx solid #0eb6c6}
.container-list{flex:1;height:100%}
.swiper-view-list{height:100%}
.swiper-view-item{display:flex;position:relative;height:110rpx;line-height:110rpx}
.swiper-view-item:after{content:'';left:0;right:0;bottom:0;height:2rpx;background-color:#dfdfdf;transform:scaleY(.5);position:absolute}
.view-item-title{color:#333;padding:0rpx 0rpx 0rpx 30rpx;font-size:30rpx}

3、JS代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    indexSize: 0, // 当前点击
    indicatorDots: false, // 是否显示面板指示点
    autoplay: false,  // 是否自动切换
    duration: 0,  // 滑动动画时长
    detail:[
      {"children":[{"id":"14","name":"办公",},{"id":"13","name":"形象与礼仪",}],"id":"1","name":"通用课程",},
      {"children":[{"id":"24","name":"营销类",},{"id":"23","name":"行政类",},{"id":"22","name":"财务类",},{"id":"21","name":"人力资源类",}],"id":"2","name":"专业知识",},
      {"children":[{"id":"33","name":"领导力",},{"id":"32","name":"基层管理",},{"id":"31","name":"GSP管理",}],"id":"3","name":"管理课程",},
      {"children":[{"id":"44","name":"营销类",},{"id":"43","name":"行政类",},{"id":"42","name":"财务类",},{"id":"41","name":"人力资源类",}],"id":"4","name":"制度政策",},] // 分类集合
  },

  /**
   * 一级分类选择
   */
  chooseTypes: function(e) {
    this.setData({
      indexSize: e.target.dataset.index
    })
  },

  /**
   * 二级分类选择
   */
  chooseSecondMenu: function(e){
    let cId = e.target.dataset.cid;
    let cName = e.target.dataset.cname;
    wx.showModal({
      title: '提示',
      content: '点击选择了：' + cId + '-' + cName,
      showCancel: false,
      success (res) {
      }
    })
  }

})