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的下一层,虽 ...
随机推荐
- HDU 5692 (DFS序+线段树)
DFS获得从0到每一个顶点的距离,同时获得L和R数组.两数组为遍历时从i进入再从i出来的序列. #pragma comment(linker, "/STACK:1024000000,1024 ...
- opencv----(1) mat最好用,和IplImage,cvmat 比较
学习了几天,发现mat比IplImage,cvmat 好用太多了. 不知道确切的原文出处,我是转自新浪的一篇博文:http://blog.sina.com.cn/s/blog_534497fd0101 ...
- Linux:系统的基本优化
前言,在拥有一台服务器的时候,首先第一件事就要根据自己的需求进行初期的优化(装好系统了),以下是关于linux系统的基本优化,内容来源与网络,自己整理了以下,忘记来自哪个网址了, centos 系统优 ...
- web beacon
网络臭虫又叫 网络信标(Web beacon), 是可以暗藏在任何网页元素或邮件内的1像素大小的透明GIF或PNG图片 可以理解为<img src="http://www.webbea ...
- adt download
http://my.oschina.net/roaminlove/blog/40384 http://dl.google.com/android/ADT-xx.x.x.zip 玩一下android的g ...
- oracle监听无法启动
昨天再监听里新加了个地址,重启电脑后监听无法启动,删除新加地址就好了 # listener.ora Network Configuration File: d:\oracle\product\10.2 ...
- Linux 最简单的驱动程序hello world
图片驱动位置:kernel3-10/driver/misc/mediatek/imgsensor/src/mt8127/kd_sensorlist.c 例子:kernel-3.10/driver/mi ...
- android 6.0获取权限
Android版本升到6.0后最坑的就是权限问题,以下是我参考大神一个权限管理工具类,希望对大家有用 PermissionUtils.java import android.Manifest; imp ...
- HUST 1371 Emergency relief
状态压缩. 每一个人所需的物品对应一个数字,统计一个每个数字有几个.每一种提供物品的状态也对应一个数字,然后暴力判断. #include<cstdio> #include<cstri ...
- 《算法导论》习题2.3-7 查找集合S中是否有两个元素和为X---Java实现
代码如下: public class MergeSort { public static void sort(int [] A,int p, int r) { if(p<r) { int q = ...