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