vue 中使用swiper 动态获取图片后滑动效果失效
首页 > >    作者:lininn   2019年10月25日 10:08 星期五   热度:357°   百度已收录  
时间:2019-10-25 10:08   热度:357° 

swiper滑动失效的原因是因为swiper的初始化在数据加载之前完成了,解决这个问题有两种方法:

 

1. 使用vue提供的$nextTick()方法

在数据初始化完毕之后,再初始化swiper就可以了

this.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {

loop: true, //循环切换
autoplay: true,//可选选项,自动滑动
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},


})
})

2.在swiper初始化的时候

swiper1 = new Swiper('.swiper-container', {
loop: true, //循环切换

autoplay: true,//可选选项,自动滑动
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
});

二维码加载中...
本文作者:lininn      文章标题: vue 中使用swiper 动态获取图片后滑动效果失效
本文地址:?post=405
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn