Swiper遇到的那些坑
1.Swiper动态加载数据之后就不滚动了我们在写项目的时候,很多swiper的数据都是动态获取到的,我们在刚进入页面的时候,初始化了swiper,但是当我们加载成功数据后(比如ajax获取数据),swiper的子元素被改变了,于是swiper就不能正常执行了,下面是我在vue中写的时候遇到的,附上解决方案。主要代码,就是下面的observer: true, //修改swiper自己或子元素...
1.Swiper动态加载数据之后就不滚动了
我们在写项目的时候,很多swiper的数据都是动态获取到的,我们在刚进入页面的时候,初始化了swiper,但是当我们加载成功数据后(比如ajax获取数据),swiper的子元素被改变了,于是swiper就不能正常执行了,下面是我在vue中写的时候遇到的,附上解决方案。
主要代码,就是下面的
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
<template>
<swiper :options="swiperOption" class="border_bottom">
<div class="swiper-slide" v-for="item in lottery_list" @click="choose(item)" :class="item.class">
{{item.name}}
</div>
</swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data() {
return {
lottery_list:[],
swiperOption: {
slidesPerView: 'auto',//'auto'
slideToClickedSlide: true,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
}
};
},
methods:{
//假设获取后台数据,这里只进行简单地赋值,来达到改变swiper子元素的目的
add(){
this.lottery_list = [
{
name:'Slide 1',
class:'active',
},
{
name:'Slide 2',
class:'',
},
{
name:'Slide 3',
class:'',
},
{
name:'Slide 4',
class:'',
},
{
name:'Slide 5',
class:'',
},
{
name:'Slide 6',
class:'',
},
]
}
}
};
</script>
但是这样的话,可能或出现问题,加载数据成功之后,轮播会默认显示最后一个slider,这个我也是找了很久,找到了一个方法暂时可以解决,就是写一个延迟,代码如下:
setTimeout(()=>{
document.getElementsByClassName('swiper-wrapper')[0].style.transform = 'translate3d(0px,0px,0px)'
},50)
其实还有另一种方法,就是在加载数据成功之后,再次初始化swiper
如果是vue的话,可以在请求成功后,写代码
this.$nextTick(function(){
var mySwiper = new Swiper('.swiper-container', {
这里面加你想要的参数
})
})
2.在使用 swiper,一旦设置 loop:true 的时候,dom 绑定事件无法触发
因为swiper可囊还不是很完善,总是会有一些坑,比如dom的点击事件,如果遇到这个问题,就不要使用dom的点击事件了,建议采用swiper自带的点击事件,具体代码swiper文档里面有
关于swiper的一些事件,我们尽量还是使用swiper自带的一些方法,这样可以有效的避免一些问题。
暂时遇到的坑就这些,后续再遇到还会补充的。
更多推荐
所有评论(0)