微信小程序自行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，很少看博客，对你有帮助别忘记点赞收藏。