【Vue3+Ts project】vant4 swipe组件实现 左右滑动滑块效果
swipe组件实现左右滑动
·
目标效果
实现前
现在的效果很明显不是自己需要的,因为他每次滑动是一个屏幕的宽度
<van-swipe >
<van-swipe-item v-for="item in 5" :key="item">
<DoctorCard />
</van-swipe-item>
这里给他添加 子盒子的宽度,距目标效果已接近了,但滑动起来是不是有点像按压弹簧 ,弹簧又再起弹起的感觉,
注意:这里宽度 width="150" 现在是固定的如何实现动态宽度查看下篇文章
【Vue3+Ts project】认识 @vueuse/core 库_春暖花开.,的博客-CSDN博客
<van-swipe width="150">
<van-swipe-item v-for="item in 5" :key="item">
<DoctorCard />
</van-swipe-item>
</van-swipe>
刚刚问题是没有关闭自动轮播 :loop="false" 将他关闭,然后关闭底部指示器 show-indicators="false",目标效果实现
<van-swipe width="150" :loop="false" :show-indicators="false">
<van-swipe-item v-for="item in 5" :key="item">
<DoctorCard />
</van-swipe-item>
</van-swipe>
更多推荐
所有评论(0)