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的下一层,虽 ...
随机推荐
- Python之路:堡垒机实例以及数据库操作
一.堡垒机前戏 开发堡垒机之前,先学习Python的paramiko模块,该模块基于SSH用于连接远程服务器并执行相关操作. SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码连接: ...
- ScrollView的fillViewPort属性
ScrollView嵌套Relative时候会发生问题,RelativeLayout不会充满ScrollView,即使设置match_parent属性也不行 这个时候就需要fillViewPort属性 ...
- HttpServletRequest.getServletContext()一直提示找不到,而引出的问题
开发j2ee项目的时候,需要用到servlet-api,如果使用了maven,web项目可以在pom.xml中手动加入所需jar包,达到与依赖j2ee libarary同样的功能.可问题来了: 1. ...
- Mybatis 示例之 Association - 偶尔记一下 - 博客频道 - CSDN.NET
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- Cocos2dx 3.1.1 学习笔记整理(4):事件监听与Action的初步使用
项目忙,趁着刚才有点空,看了下触摸事件在新版本中怎么实现,遇到问题都是去:cocos2d-x-3.1.1\tests\cpp-tests\Classes下面找的,里面都是一些小例子. 首先新的CCNo ...
- Zipf’s Law
Let f(w) be the frequency of a word w in free text. Suppose that all the words of a text are ranked ...
- [iOS、Unity、Android] 浅谈闭包的使用方法
前言 我们经常所编程语言的的进步速度是落后于硬件的发展速度的. 但是最近几年,闭包语法在各个语言中都有自己的体现形式,例如 • C语言中使用函数指针作为回调函数的入口: • Java和C#语言中的La ...
- [iOS] 响应式编程开发-ReactiveCocoa(二)
RAC实现图片下载功能 在实现异步RAC下载图片的过程中,需要注意以下几点: • 通过 NSURLConnection 对象的 +(RACSignal *)rac_sendAsynchronousRe ...
- 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染
Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...
- lpc1768的PWM使用
//p2.0 pwm1.1 void ALS_Init(void) //初始化 { LPC_SC->PCONP |= (1<<1)|(1<<2)|(1<&l ...