Swiper 是一个开源免费的移动触摸插件。

在使用中遇到这样一个问题,记录一下。

page 间切换效果 使用 fade 的时候,如果每个页面的大小不一样, 比如第一个页面全屏, 第二个页面比第一个小, 那么切换到第二页的时候, 第一页的内容还可以看到。

还有,使用 fade 过度方法,onSlideChangeEnd 回调偶尔触发,偶尔不触发。 因此使用 onTransitionEnd;

解决方案:

  1. 添加 fade:{crossFade:true}
  2. 切换之后效果, 使用 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回调偶尔触发,偶尔不触发等;的更多相关文章

  1. swiper.js插件的使用

    swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css. <!DOCTYPE html><html>    <he ...

  2. iScroll.js和swiper.js

    最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...

  3. iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

                      上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...

  4. 移动端开发(四):swiper.js

    swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js    是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...

  5. Swiper.js使用教程

    官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...

  6. Swiper.js使用及API介绍

    Swiper.js详细使用教程http://www.swiper.com.cn/api/start/2014/1218/140.html

  7. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

  8. css动效库animate.css和swiper.js

    animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...

  9. 全屏使用swiper.js过程中遇到的坑

    概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...

随机推荐

  1. mariadb cache1

    http://www.percona.com/blog/2006/07/27/mysql-query-cache/ MySQL Query Cache July 27, 2006 by Peter Z ...

  2. android怎么打开wifi的组播功能

    http://android.tgbus.com/Android/tutorial/201204/418987.shtml

  3. openstack controller ha测试环境搭建记录(十二)——配置neutron(计算节点)

    在计算节点配置内核参数:vi /etc/sysctl.confnet.ipv4.conf.all.rp_filter=0net.ipv4.conf.default.rp_filter=0 在计算节点使 ...

  4. MySQL 5.5.x配置文件详解

    MySQL 5.5.x my.cnf参数配置优化详解 一直有耳闻MySQL5.5的性能非常NB,所以近期打算测试一下,方便的时候就把bbs.kaoyan.com升级到这个版本的数据库.今天正好看到一篇 ...

  5. shell字符串操作之cut---实现字符串截取

    shell中(字符串截取) cut是以每一行为一个处理对象的,这种机制和sed是一样的.(关于sed的入门文章将在近期发布) 2 cut一般以什么为依据呢? 也就是说,我怎么告诉cut我想定位到的剪切 ...

  6. 苹果应用商店AppStore审核中文指南

    目录 1. 条款与条件2. 功能3. 元数据.评级与排名4. 位置5. 推送通知6. 游戏中心7. 广告8. 商标与商业外观9. 媒体内容10. 用户界面11. 购买与货币12. 抓取与聚合13. 设 ...

  7. 24、手把手教你Extjs5(二十四)模块Form的自定义的设计[3]

    自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. ...

  8. c#中怎么求百分比

    string Scorepercent = (lowScoreNum*1.0/ ScoreNum).ToString("P");//百分比 ToString("P&quo ...

  9. .htaccess 使用大全

    重新和重定向 注意:首先需要服务器安装和启用mod_rewrite模块. 强制 www RewriteEngine on RewriteCond %{HTTP_HOST} ^example\.com ...

  10. android NDK编译(导入).a文件和编译多个so文件(转)

    源:android NDK编译(导入).a文件和编译多个so文件 一.编译一个静态库 libstatic_android.a LOCAL_PATH := $(call my-dir) include ...