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

上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件.

每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息.

当手从swiper上开始滑动的时候,整个scroll就显得很不灵敏.各种调试,各种alert终于把问题定位在swiper.js的touchend上.

touchend没有冒泡到scroll上,但是touchstart,toucnmove是有冒泡到scroll上的.

找了好久都没有找到哪里阻止了冒泡.最后想到一个办法,就是在swiper的touchend上调用scroll的touchend.

最后在sweiper.jquery.js中添加如下代码.

myScroll是iscroll运行是的的实例化对象._end()是实例touchend触发的事件.

至于源码可以从我的git上下载:

https://github.com/guoyansi/jsUI

时间： 2024-10-12 05:59:12

iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)的相关文章

bootstrap的Modal和select2联合使用时，出现z-index层级问题

解决方案: (1) select2 加入 dropdownParent 属性,设置父元素modal $(".select2-demo").select2({ dropdownParent:$("#Modal-demo") }); (2) css设置让select2的选择弹出层位于最上层,否则将被modal遮挡住 .select2-drop { z-index: 10050 !important; } .select2-search-choice-close { m

202 移动端常用开发插件：fastclick ，Swiper ，lsuperslide，iscroll，zy.media.js

1.5.1 什么是插件移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢? JS 插件:是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用.如轮播图和瀑布流插件. 特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小. 我们以前写的animate.js 也算一个最简单的插件 fastclick 插件解决 300ms 延迟. GitHub官网地址: https://github.com/ftlabs/fastclick 1.

extjs4.1 和struts2结合使用时延迟加载js，可使用extjs的mvc模式

直奔主题,在前台我们点击左边的菜单会先打开一个tab页,希望将请求的页面放到新打开的tab页上面:关键代码如下: tabPanel.add({ id: id, title: title, closable: true, autoScroll: true, layout: 'fit', loader: { scripts: true, autoLoad: true, params: params, url: url } }); 传统的方法是在tab里面嵌入一个iframe,然后在里面嵌入一个独立的

window.location.href 放置在单独的JS文件中使用时问题

场景:假设当前浏览器地址栏的地址是:http://localhost:8888/SSHBoot/tourist/homeMainAction_signInUI.do, 现在我想在点击按钮时定位到“http://localhost:8888/SSHBoot/member/adminMainAction_mainUI.do”这个地址以下js代码是没问题,将js脚本放置到页面中 <html> <head> <meta http-equiv="Content-Type&q

swiper.js 多图片页面的懒加载lazyLoading

swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需要将图片img标签的src改写成data-src,并且增加类名swiper-lazy.背景图的延迟加载则增加属性data-background(3.0.7开始启用). lazyLoadingInPrevNextAmount 设置在延迟加载图片时提前多少个slide.个数不可少于slidesPerVi

swiper.js

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title>  <link rel="stylesheet" href="../dist/css/swiper.min.css"

Swiper.js使用教程

上个礼拜,通过在制作公司产品介绍弹出框的过程,使用了强大的Swiper.js,官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及PC端的浏览器也有着

通过js检测到iframe，使父窗口重定向到index -----------？？？----------------------

通过js检测到iframe,使父窗口重定向到index -----------???---------------------- 如果本身已将在iframe中,那么重定向的页面应该直接添加到父级iframe中-----???----

swiper.js初涉

要做个手机端的轮播,研究了一下swiper.js 中文网站:http://www.swiper.com.cn/ 英文网站:http://www.idangero.us/swiper/ 记录一下代码: var mySwiper = new Swiper('.swiper-container',{ mode: 'vertical',//滑动方向为垂直方向 pagination: '.pagination', onSlidePrev:function(swip