码迷,mamicode.com
首页 > 其他好文 > 详细

浅谈被Swiper的坑

时间:2021-04-12 12:15:18      阅读:0      评论:0      收藏:0      [点我收藏+]

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

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

浅谈被Swiper的坑

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!