Swiper.js使用遇到的问题总结onSlideChangeEnd回调偶尔触发,偶尔不触发等;
Swiper 是一个开源免费的移动触摸插件。
在使用中遇到这样一个问题,记录一下。
page 间切换效果 使用 fade 的时候,如果每个页面的大小不一样, 比如第一个页面全屏, 第二个页面比第一个小, 那么切换到第二页的时候, 第一页的内容还可以看到。
还有,使用 fade 过度方法,onSlideChangeEnd 回调偶尔触发,偶尔不触发。 因此使用 onTransitionEnd;
解决方案:
- 添加 fade:{crossFade:true}
- 切换之后效果, 使用 onSlideChangeEnd(page切换后触发) 会偶尔不触发, 请使用 onTransitionEnd(过度效果结束触发)
var mySwiper = new Swiper('.swiper-container',{
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
effect: 'fade',
// tips
fade: {
crossFade: true,
},
onTransitionEnd: function (swiper) {
console.info("页面跳转到第:", swiper.activeIndex, " 页")
}
})
Swiper.js使用遇到的问题总结onSlideChangeEnd回调偶尔触发,偶尔不触发等;的更多相关文章
- swiper.js插件的使用
swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css. <!DOCTYPE html><html> <he ...
- iScroll.js和swiper.js
最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...
- iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)
上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...
- 移动端开发(四):swiper.js
swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js 是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...
- Swiper.js使用教程
官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...
- Swiper.js使用及API介绍
Swiper.js详细使用教程http://www.swiper.com.cn/api/start/2014/1218/140.html
- 使用swiper.js实现移动端tab切换
在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...
- css动效库animate.css和swiper.js
animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...
- 全屏使用swiper.js过程中遇到的坑
概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...
随机推荐
- HTTPS连接前的几毫秒发生了什么?
原文:http://blog.jobbole.com/48369/ 提示:英文原文写于2009年,当时的Firefox和最新版的Firefox,界面也有很大改动.以下是正文. 花了数小时阅读了如潮的好 ...
- PAT (Advanced Level) 1014. Waiting in Line (30)
简单模拟题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm& ...
- JS的事件动态绑定机制
动态添加标签+动态添加事件 window.onload=function(){ (已存在元素节点)事件绑定: (未来元素节点)事件绑定: } 它会扫描元素节点,如果元素节点存在(静态写好的),就可以绑 ...
- (中等) CF 311B Cats Transport,斜率优化DP。
Zxr960115 is owner of a large farm. He feeds m cute cats and employs p feeders. There's a straight r ...
- mysql问题: alter导致速度慢
1 如何并行执行. 数据库里有一个数据量非常大的表,当对这个表进行alter的时候,这时候该表是只读的,由于数据量很大alter时间很长,如果这时候有insert或update操作,有什么办法在这期间 ...
- iOS进阶
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:wjh2005链接:https://www.zhihu.com/question/28518265/answer/887505 ...
- tp框架命名空间
命名空间:相当于虚拟的目录在tp里面主要为了实现自动加载类 TP框架下有一个初始命名空间(相当于根目录)初始命名空间:ThinkPHP\Library 在初始命名空间下又包含很多根命名空间这些根命名空 ...
- Linux文件锁学习-flock, lockf, fcntl
参考 linux中fcntl().lockf.flock的区别 这三个函数的作用都是给文件加锁,那它们有什么区别呢? 首先flock和fcntl是系统调用,而lockf是库函数.lockf实际上是f ...
- Python使用Selenium/PhantomJS
安装selenium: 1 pip install selenium 安装PhantomJS: 1 2 3 4 https://bitbucket.org/ariya/phantomjs/downlo ...
- 330. Patching Array
Given a sorted positive integer array nums and an integer n, add/patch elements to the array such th ...