码迷,mamicode.com
首页 > 其他好文 > 详细

iscroll插件的使用

时间:2017-07-16 12:25:45      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:style   高度   标签   click   efault   wrapper   tde   滚动条   效果   

一.基本使用方法

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();

 

iscroll插件的使用

标签:style   高度   标签   click   efault   wrapper   tde   滚动条   效果   

原文地址:http://www.cnblogs.com/jieru/p/7190050.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!