目标效果

实现前

现在的效果很明显不是自己需要的,因为他每次滑动是一个屏幕的宽度

<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>


 

Logo

前往低代码交流专区

更多推荐