浅谈被Swiper的坑

标签：自动   ide   pre   显示   样式   触屏   修改   加载   www   

最近在研发“移动端触屏滑动”（手机端在线做题翻页）功能的过程当中，使用了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();

浅谈被Swiper的坑

标签：自动   ide   pre   显示   样式   触屏   修改   加载   www   

原文地址：https://www.cnblogs.com/shiyige-216/p/14642451.html