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

最新推荐文章于 2022-05-05 16:59:51 发布

jr_csdn_jr

最新推荐文章于 2022-05-05 16:59:51 发布

阅读量350

点赞数

分类专栏： swiperBUG 文章标签： firebug vue.js

本文链接：https://blog.youkuaiyun.com/jr_csdn_jr/article/details/108045151

版权

swiperBUG 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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