iscroll插件的使用

一.基本使用方法

1.首先是html

<div id="wrapper"  style="position:relative;height:100%">
   <div class="main-content list" id="list">    ......
    </div>
</div

一定要让wrap容器比滚动容器的高度小才能出现滚动,而且滚动容器只有一个元素标签

2.阻止微信默认的下拉事件

  $(document).on("touchstart", function(e) {
                e.preventDefault();
            })

3.要保证jq在该插件之前先加载了

4.在页面加载完之后初始化该插件,并且添加滚动事件

 var scroll=null;$(window).on("load", function() {
                scroll = new IScroll("#wrapper", {
                    preventDefault: false,
                    bounce: false,
                    click: true,
                });

                scroll.on("scrollEnd", function() {
                    console.log(this.y, this.maxScrollY, "scrollEnd");
                });
            });
bounce: false,//去掉当滚动器到达容器边界时他将执行一个小反弹动画效果click:为了重写原生滚动条,iScroll禁止了一些默认的浏览器行为,比如鼠标的点击。如果你想你的应用程序响应click事件,那么该设置次属性为true

5.假如有异步加载了数据,要记得在改变页面之后使用以下方法

  scroll.refresh();
时间: 2024-10-11 07:34:28

iscroll插件的使用的相关文章

使用iscroll插件实现下拉刷新功能

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0

JQuery Mobile iscroll插件使用教程及注意事项

中文文档:http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml 问题:使用了iscroll之后,你会发现点击输入框时不灵敏,经常无法聚焦:页面文字也无法选择和复制.这是由于iscroll要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为 ,包含在wrapper中的input.Seclect控件无法选择或点击 解决办法:在创建Scorll时,定义以下方法 onBeforeScrollStart: functi

基于iscroll实现下拉和上拉刷新

http://www.zhangyunling.com/359.html 重要提示 本插件已经经过更新,查看更新的插件代码,以及介绍请查看:基于iscroll实现下拉和上拉刷新(优化); 在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在IOS系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

iscroll

在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的内容,那么就等于修改了APP的内容展示,有更灵活的满足更新版本. 概述 但是有一点就是,如何让web实现的页面,看起来更像是原生的APP呢,首先要想办法解决的就是下拉刷新的功能,对于这个功

isscroll插件 实现下拉加载 上啦刷新 转

http://www.jb51.net/article/98394.htm 下面是别人的代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-widt

手机浏览器下IScroll中click事件

产品的h5页面几乎都使用了iscroll插件,如果a标签在iscroll里,在部分手机浏览器中会出现无法点击的情况,不管是绑定click事件还是使用a标签的href属性.href属性偶尔还会能点击,click事件完全不能. 如果用button或input代替a,都能响应click事件. 如果用微信内置浏览器,都能响应click事件(nubia除外).QQ浏览器也能响应. 也就是出现此问题跟手机本地浏览器,iscroll,a标签都有关系. iScroll uses various techniqu

引用iScroll.js实现上拉和下拖刷新

使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时就相当于分页请求数据,这时候需要在ajax请求时发送pageIndex参数,而初始化加载时需要从后台返回一个pageCount以便前台判断. 4.最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(p

移动端兼容性问题解决方案

1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效.这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体.图片都很小看不清,此时可以快速