微信小程序自行diy选择器有效果图

效果图

实现思路

主要运用到小程序自带视图容器《swiper》

运用到的属性《vertical》《display-multiple-items》《current》《animationfinish》
滑动方向变为纵向
vertical：true
显示的滑块数量
display-multiple-items：5
当前所在滑块的 index
current：0
动画结束时触发事件
@animationfinish(事件名)

这里我使用的是VUE3仅供参考

<view class="swiper-bottom-box flex">
  <view class="swiper-bottom-border" />
  <swiper vertical class="swiper-bottom-item" :display-multiple-items="5"
          :current="parseInt(props.jointModel.startHour) - 6"
          @animationfinish="endUpdate($event,1,6)">
    <block v-for="(item,index) in timeArr" :key="index">
      <swiper-item>
        <view class="swiper-bottom-cell">
          {{ item.text }}
        </view>
      </swiper-item>
    </block>
  </swiper>
  <view>:</view>
  <swiper vertical class="swiper-bottom-item" :display-multiple-items="5"
          :current="parseInt(props.jointModel.startMinute)"
          @animationfinish="endUpdate($event,2,0)">
    <block v-for="(item,index) in divideArr" :key="index">
      <swiper-item>
        <view class="swiper-bottom-cell">
          {{ item.text }}
        </view>
      </swiper-item>
    </block>
  </swiper>
  <view>─</view>
  <swiper vertical class="swiper-bottom-item" :display-multiple-items="5"
          :current="parseInt(props.jointModel.endHour) - 6"
          @animationfinish="endUpdate($event,3,6)">
    <block v-for="(item,index) in timeArr" :key="index">
      <swiper-item>
        <view class="swiper-bottom-cell">
          {{ item.text }}
        </view>
      </swiper-item>
    </block>
  </swiper>
  <view>:</view>
  <swiper vertical class="swiper-bottom-item" :display-multiple-items="5"
          :current="parseInt(props.jointModel.endMinute)"
          @animationfinish="endUpdate($event,4,0)">
    <block v-for="(item,index) in divideArr" :key="index">
      <swiper-item>
        <view class="swiper-bottom-cell">
          {{ item.text }}
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。