1.动态渲染swiper左右切换按钮和滑动切换失效
原因:这是因为ajax是个异步请求,当页面渲染完毕时,swiper插件没法获取最新的swiper-slide个数,导致部分功能失效。
解决办法:
在swiper初始化时设置下面属性
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true //修改swiper的父元素时,自动初始化swiper
例:
var mySwiper = new Swiper('.swiper-container', {
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
direction: 'horizontal', // 水平切换选项
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
2. 初始化swiper时,设置loop:true 动态渲染数据之后,无法实现循环切换
原因同上
解决办法: 在ajax的成功回调函数里面初始化swiper,以防万一,可以写在一个定时器里初始化swiper。
例:
$.ajax({ url: "test.html", context: document.body, success: function(){
setTimeout(function() {
mySwiperFun()
}, 50);
}});
注:mySwiperFun为初始化swiper方法
3. 初始化swiper时,设置loop:true,使用vue写的部分点击事件失效
原因:因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件,此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时,点击事件就会失效。
解决办法:我在网上搜索一些方式是说在初始化时,定义click事件,然后进行点击事件的操作,但是他们都是那种基于整个swiper-slide的点击,考虑到现实情况有可能是一个swiper-slide需要有不同点击事件,或者需要同一个点击方法需要传递不同的参数。我使用了jquery的点击事件。
注意 :$(".class").click(function(){});这种写法是无效的,
要用这种写法:$(document).on("click",".class",function(){});
如果是同个方法需要传递不同参数的需求,可以使用 data-参数 的方法实现
例:
<!-- html -->
<div class="swiper-container" style="overflow: hidden">
<div class="swiper-wrapper">
<div class="swiper-slide" v-show="arr.length > 0" v-for="(item,index) in arr" :key="index">
<div class="item">
<div class="top">
<!-- 前者为动态传入参数,后者为固定传入参数 -->
<p :data-id='item.id' data-type='6'>{{item.id}}</p>
</div>
<div class="bottom">
<p :data-id='item.id' data-type='6'>{{item.id}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- js -->
<script>
var arr = [{id:1}, {id:2}, {id:3}]
$(document).on('click','.item p',function(e){
// 获取传入参数
var id = e.currentTarget.dataset.id
var type = e.currentTarget.dataset.type
// 调用方法
consoleData(id,type)
})
function consoleData (id,type){
console.log(id,type)
}
</script>
// 这个代码片段不是完整的,引入文件和初始化swiper请自行补充完整
此外,我还发现一个问题,swiper的每个版本变化都挺大的,比如你写好的一个轮播样式,换一个版本的swiper.js 可能样式就变了。
所以慎重切换不同版本的swiper。