浅谈被Swiper的坑

最近在研发“移动端触屏滑动”(手机端在线做题翻页)功能的过程当中,使用了Swiper插件,官方参考地址:swiper

写好静态模板,一切顺利,切换动态数据加载时,不能上下切换、前后滑动,动态统计template模板加载的数据量,绑定到swiper-slide类里面,虽然可以解决这个问题,

在用户体验上极为不好;浏览Swiper官网,查看API文档,原来笔者忽略了两个参数:observerobserveParents,即启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。

如下所示:

var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '#btn-next',
prevEl: '#btn-prev',
},
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
});

并且在调用上一页下一页方法时,不添加这两个参数,体验相当不流畅:

var mySwiper = new Swiper('.swiper-container', {
observer: true,
observeParents: true,
});

mySwiper.slideNext();

上一篇:vue+swiper背景图随swiper改变


下一篇:vue swiper动态添加轮播图