使用swiper插件时，用axios获取数据渲染页面时，出现界面不能滑动到下一页（下一页有数据）

最新推荐文章于 2024-12-31 11:41:15 发布

原创最新推荐文章于 2024-12-31 11:41:15 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#firebug #vue.js

swiperBUG 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在数据变化时利用Vue.js的watch和$nextTick函数来更新Swiper轮播组件，确保DOM更新后正确初始化Swiper，实现流畅的视觉效果。

可以使用watch获取asiox数据的变化
主要使用**$nextTick**函数

$nextTick可以在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

watch: {
	//categorys是获取到的数据作用在swiper上的
    categorys(){
      this.$nextTick(()=>{
        // swiper
          new Swiper ('.swiper-container', {
          loop: true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
        })
    })
    }
  },