iscroll外掛程式的使用

一.基本使用方法

1.首先是html

"

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

一定要讓wrap容器比滾動容器的高度小才能出現滾動，而且滾動容器只有乙個元素標籤

$(document).on("

touchstart
", function(e) )

3.要保證jq在該外掛程式之前先載入了

4.在頁面載入完之後初始化該外掛程式，並且新增滾動事件

var scroll=null;

$(window).on("
load
", function() );
scroll.on(
"scrollend
", function() );
});

bounce: false,//去掉當滾動器到達容器邊界時他將執行乙個小**動畫效果

click：為了重寫原生滾動條，iscroll禁止了一些預設的瀏覽器行為，比如滑鼠的點選。如果你想你的應用程式響應click事件，那麼該設定次屬性為true

scroll.refresh();

二、我的外掛程式

1.html

"

"class="
">
class="
main-content list
" id="
list
">
"load-container
"class="
load-container
">沒有更多的內容！

2.css

position: relative;

height:

100%;

} height: 6rem;

text-align: center;

padding-top: 1rem;

}3.js

define(function(require, exports, module) ",//非同步請求位址

loadicon: $("#load-container")//提示容器
}*/function initscroll(config) );
scroll.on(
"scrollend
", function() 
});});
getdata(config);
}$(document).on(
"touchstart
", function(e) )
function getdata(config) ,
url: config.url,
success: function(res) );
loadicon.before(html);
p++;
scroll.refresh();
loadicon.html(
"載入完成！");
} else
}});
}module.exports =
})

注意載入的提示要夠高才能顯示出來！

三、遇到的bug

1.在這個頁面的非滾動容器以外的地方放了a標籤，結果a標籤預設事件不生效，在開發工具上可以使用，在手機上不行，原因是因為在移動端有touchstart

事件，而我在觸發該事件的時候阻止了預設事件，解決辦法如下：

$(document).on("

touchstart
", function(e) 
})

2.手機端的要設定容器overflow：hidden

在React中引入IScroll外掛程式做滾動

最近做乙個h5專案，資料互動量比較大，很多頁面都是從後台拿過來資料做乙個列表顯示，這自然就遇到了滾動。import react from react import from react dom import common css base.styl import common css waastyl...

iscroll的高階問題

關於iscroll的高階問題 剛開始使用iscroll的時候會遇到好多問題，其實大部分都是缺少配置引數。這些配置引數可以解決好多問題。但是有一種的是關於頁面載入的。比如說 剛開啟頁面的時候 你的頁面可以正常進行滑動 當你的頁面再次重新整理 或者跳轉的時候 並不能滑動。所以 你需要 讓他頁面載入完畢的...

iscroll使用之頁面卡頓問題

最近在開發專案時，遇到乙個問題，使用iscroll實現的頁面滾動，測試時發現在chrome瀏覽器中的模擬移動裝置頁面不能平滑滾動，有卡頓現象，在android手機端也有同樣的問題。在github上搜尋了iscroll的相關問題，以下是對一些覺得對此問題解決有幫助的一些回答的總結。解決辦法 通過在he...