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