最近在研发“移动端触屏滑动”(手机端在线做题翻页)功能的过程当中,使用了Swiper插件,官方参考地址:swiper
写好静态模板,一切顺利,切换动态数据加载时,不能上下切换、前后滑动,动态统计template模板加载的数据量,绑定到swiper-slide类里面,虽然可以解决这个问题,
在用户体验上极为不好;浏览Swiper官网,查看API文档,原来笔者忽略了两个参数:observer
和observeParents,即启动动态检查器,
当改变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();