效果圖
實現思路
主要運用到小程序自帶視圖容器《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，很少看博客，對你有幫助別忘記點贊收藏。
)
