抖音小程序-手搓三级联动

前言

因为最近把原生的微信小程序copy到抖音小程序，然后很多地方只要稍稍改动一下就可以用了，但是在官方的picker-view组件上，双方是有所区别的，然后，我的微信小程序的逻辑代码就走不通了，在抖音开发者工具上，正常运行的代码，在手机上面缺蕴含这无法理解的BUG，本着多一事不如少一事的原则，我决定还是手搓一个差不多的三级联动出来，虽然效果差了点，但是胜在稳定。

代码

HTML 部分

      <view des="三级联动" class="three_box flex-row-center">
        <scroll-view scroll-y="{{true}}" scroll-with-animation="{{true}}" class="item">
          <view tt:for="{{provinceList}}" tt:key="index" class="content {{selectIndexArr[0]==index?" select":""}}"
            catchtap="onSelect" data-type="{{0}}" data-index="{{index}}">{{item.area_name}}</view>
        </scroll-view>
        <scroll-view scroll-y="{{true}}" scroll-with-animation="{{true}}" class="item">
          <view tt:for="{{cityList}}" tt:key="index" class="content {{selectIndexArr[1]==index?" select":""}}"
            catchtap="onSelect" data-type="{{1}}" data-index="{{index}}">
            {{item.area_name}}</view>
        </scroll-view>
        <scroll-view scroll-y="{{true}}" scroll-with-animation="{{true}}" class="item">
          <view tt:for="{{areaList}}" tt:key="index" class="content {{selectIndexArr[2]==index?" select":""}}"
            catchtap="onSelect" data-type="{{2}}" data-index="{{index}}">
            {{item.area_name}}</view>
        </scroll-view>
      </view>

CSS部分（SASS）

// 三级联动 start
.three_box {
  width: 90vw;
  height: 400rpx;
  margin: 0 auto;
  padding: var(--padding-top) var(--padding-left);
  // border: 1px solid red;
  overflow: hidden;

  .item {
    width: 20vw;
    height: 400rpx;
    overflow: hidden;

    .select {
      color: var(--theme);
    }
  }

  .content {
    width: 20vw;
    height: 70rpx;
    margin-top: 20rpx;
    text-align: center;
    font-size: var(--font-size-standard-mini);
  }

}

// 三级联动 end

脚本部分（TS）

/**
 * 三级联动选择事件泛型
 */
type ThreeSelectEvent = {
    currentTarget: {
        dataset: {
            type: 0 | 1 | 2 // 左|中|右
            index: number
        }
    }
}
/// -----------------------------------------------------上面是泛型  下面是逻辑部分


    data:{
        selectIndexArr: [0, 0, 0],// 三级联动-上一次的变化  
    },
  /**
   * 三级联动选择
   * @param event 三级联动选择事件
   */
  onSelect(event: ThreeSelectEvent) {
    const { type, index } = event.currentTarget.dataset
    const { selectIndexArr } = this.data
    selectIndexArr[type] = index // 设置选中索引
   
    this.setData({ selectIndexArr }) // 
  }

效果

END

这个是一个最基础的版本，后续如果想要什么功能的话 可以在此基础上进行完善 谢谢大家观看。