vue中动态添加swiper，滑动效果不起作用

vue中动态添加swiper，滑动效果不起作用在页面开发过程中，slide的数据经常是需要动态获取然后赋值，但这个时候dom已经渲染完成，所以，页面上的slide并没有更新碰到这个问题的小伙伴，看来还是没把swiper深究。其实swiper的开发者早就想到这个问题了，有时间可以看下swiper的开发文档： http://www.swiper.com.cn/api/observer/218.htm

eva_yg

7241人浏览 · 2018-05-30 18:29:29

eva_yg · 2018-05-30 18:29:29 发布

vue中动态添加swiper，滑动效果不起作用

在页面开发过程中，slide的数据经常是需要动态获取然后赋值，但这个时候dom已经渲染完成，所以，页面上的slide并没有更新

碰到这个问题的小伙伴，看来还是没把swiper深究。

其实swiper的开发者早就想到这个问题了，有时间可以看下swiper的开发文档： http://www.swiper.com.cn/api/observer/218.html

Observer（监视器）：
这个属性里面有两个方法：observer 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper

observeParents 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
上面是官方文档的解释；相信现在大家应该都有解决方案了

下面回到正题，解决刚开始说的那个问题，在vue中使用swiper,数据渲染成功后，滑动效果不起作用：

首先，把初始化swiper放在数据获取成功之后；然后打开 observer:true, observeParents:true，实时监听swiper的子元素的变化

 
  var swiper = new Swiper(this.$refs.swiper1, { 
 
                  slidesPerView: 4, 
 
                  spaceBetween: 10, 
 
                  freeMode: true, 
 
                  observer:true, 
 
                  observeParents:true 
 
              });

如上，就可以了。欢迎留言评论

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^