swiper5+vue-awesome-swiper4

先来看效果

最终方案

github.com/surmon-chin…

"swiper": "^5.4.5", "vue-awesome-swiper": "^4.1.1",

swiper-no-swiping ：禁止手动来滑动列表

{{item.name}}

{{item.phone}}

{{item.time}}

components: { Swiper, SwiperSlide, }, data() { return { swiperOptions: { observer: true, // 开启动态检查器，监测swiper和slide,（！！！不加此属性，刚进页面不会滚动） direction: 'vertical', slidesPerView: 3, // 每页显示几个slide spaceBetween: 0, // slide的间距px speed: 2000, // 速度 autoplay: { delay: 1000, stopOnLastSlide: false, disableOnInteraction: false, // 用户操作swiper之后，是否禁止 autoplay }, loop: true, }, } }