微信小程序三级联动，三列形式

wxml:

<!--pages/category/category.wxml-->
<view class="container">
  <scroll-view class='nav_left' scroll-y='true'>
    <block wx:for="{{cateItems}}" wx:key="{{index}}">
      <view class="nav_left_items {{curNav==item.value?'active':''}}" bindtap="switchRightTab" data-index='{{index}}' data-id="{{item.value}}">{{item.label}}</view>
    </block>
  </scroll-view>
  <scroll-view class="nav_right" scroll-y="true">
    <!--如果有数据，才遍历项-->
    <view wx:if="{{cateItems[curIndex].children.length>0}}">
      <block wx:for="{{cateItems[curIndex].children}}" wx:key="{{index}}">
        <view class="nav_right_items {{curNav2==item.value?'active':''}}" bindtap="handletwo" data-indextwo='{{index}}' data-idtwo="{{item.value}}">
        <!--跳转下一级 -->
            <text>{{item.label}}</text>
        </view>
      </block>
    </view>
  </scroll-view>
  <scroll-view class="nav_right_two" scroll-y="true" wx:if="{{cateItems[curIndex].children[curIndex2].children.length>0}}">
         <block wx:for="{{cateItems[curIndex].children[curIndex2].children}}" wx:key="{{index}}">
            <view class="nav_right_items"><text>{{item.label}}</text></view>
         </block>
  </scroll-view>
</view>

js:（其中的数据就不在这里展示，感兴趣可以去下载https://github.com/myyezi/myapi/blob/master/shuju.js）

var shuju = require('./shuju.js')
Page({
  data: {
    cateItems: shuju,
    // curNav: '01', //如果希望有初始值可以加注释的
    // curIndex: 0,
    // curNav2: 0,
    // curIndex2: 0
  },

  switchRightTab: function (e) {
    console.log(e)
    let id = e.currentTarget.dataset.id,
      index = e.currentTarget.dataset.index;
    this.setData({
      curNav: id,
      curIndex: index
    })
  },
  handletwo: function (e) {
    console.log(e)
    let id2 = e.currentTarget.dataset.idtwo;
    let index2 = e.currentTarget.dataset.indextwo;
    this.setData({
      curNav2: id2,
      curIndex2: index2
    })
  },
})

wxss:

.container{
    position:fixed;
    width:100%;
    height:100%;
    background-color:#FFF;
  }
  .nav_left{
    width:25%;
    height:100%;
    background:#F2F2F2;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
  }
  .nav_left .nav_left_items{
    height:100rpx;
    line-height:100rpx;
    font-size:28rpx;
  }
  .nav_left .nav_left_items.active{
    position:relative;
    background:#FFF;
    color:#FF5000;
  }
  .nav_left .nav_left_items.active::before{
    display: inline-block;
    width:6rpx;
    height:60rpx;
    background:#FE5723;
    content:'';
    position:absolute;
    top:20rpx;
    left:0;
  }
  .nav_right{
    position:absolute;
    top:0;
    left:25%;
    width:35%;
    height:100%;
    background-color: #e0e0e0;
  }
   
  .nav_right .nav_right_items{  
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    text-align: center; 
  } 
  .nav_right .nav_right_items image{
    width: 120rpx;  
    height: 120rpx; 
  } 
  .nav_right .nav_right_items text{
    display: block;
    font-size: 28rpx;  
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
  } 
  .nocate{
    padding:100rpx;
    text-align: center;  
  } 
   
  .nocate image{
    width:70rpx;
    height:70rpx;
  }
  .nocate text{
    font-size:28rpx;
    display:block;
    color:#BBB;
  }
  /*隐藏滚动条*/
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
  }
  .nav_right_two{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #c2c0c0;
    width: 40%;
  }
  .nav_right_two .nav_right_items{
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    text-align: center;
  }
  .nav_right_two .nav_right_items text {
    display: block;
    font-size: 28rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .nav_right .nav_right_items.active{
    position: relative;
    background: #FFF;
    color: #FF5000;
    
  }
  .nav_right .nav_right_items.active::before{
    display: inline-block;
    width:6rpx;
    height:60rpx;
    background:#FE5723;
    content:'';
    position:absolute;
    top:20rpx;
    left:0;
  }