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

 二、我的插件

1.html

<div id="wrapper" class="wrapper">
    <div class="main-content list" id="list">
       <div id="load-container" class="load-container"> 没有更多的内容！ </div>
    </div>
</div>

2.css

.wrapper { position: relative; height: 100%; } .wrapper .load-container { height: 6rem; text-align: center; padding-top: 1rem; }

3.js

 

define(function(require, exports, module) { require("iscroll"); var scroll = null; var p = 1; /* 插件的使用参数 { url: "{:U('next_chain_list')}",//异步请求地址 loadIcon: $("#load-container")//提示容器 }*/ function initScroll(config) { $(window).on("load", function() { scroll = new IScroll("#wrapper", { preventDefault: false, bounce: false, click: true, }); scroll.on("scrollEnd", function() { //当下拉到距离可滚动区域底部30的时候触发事件
                if (this.y - 30 < this.maxScrollY) { getData(config); } }); }); getData(config); } $(document).on("touchstart", function(e) { //阻止微信上拉事件
 e.preventDefault(); }) function getData(config) { var loadIcon = config.loadIcon loadIcon.show(); loadIcon.html("加载中&nbsp;&nbsp;&nbsp;<i class='fa fa-spinner fa-pulse'></i>"); $.ajax({ type: "get", data: { p: p }, url: config.url, success: function(res) { var html = ''; if (res.data.length != 0) { res.data.forEach(function(data) { html = html + '<div class="item">' +
                            '<h4>' + data.name + '</h4>' +
                            '<p>店员数量：' + data.seller_num + '</p>' +
                            '<p>分店数量：' + data.store_num + '</p>' +
                            '<p>药品销量：' + data.drug_num + '</p>' +
                            '</div>'; }); loadIcon.before(html); p++; scroll.refresh(); loadIcon.html("加载完成！"); } else { loadIcon.html("没有更多的内容！"); } } }); } module.exports = { initScroll: initScroll } })

注意加载的提示要够高才能显示出来！

三、遇到的bug

1.在这个页面的非滚动容器以外的地方放了a标签，结果a标签默认事件不生效，在开发工具上可以使用，在手机上不行，原因是因为在移动端有touchstart事件，而我在触发该事件的时候阻止了默认事件，解决办法如下：

$(document).on("touchstart", function(e) { //阻止微信上拉事件
        if (e.target.tagName != 'A' && e.target.parentNode.tagName != 'A') { e.preventDefault(); } })

 2.手机端的要设置容器overflow：hidden