iscroll簡單使用說明

iScroll是一個高性能，資源佔用少，無依賴，跨平臺的javascript上拉加載，下拉刷新的滾動插件，目前版本v5.2.0。

GitHub下載地址：https://github.com/cubiq/iscroll

iScroll進行了不一樣的優化，爲了達到更高的性能，iScroll分爲了多個版本，你能夠根據項目選擇最適合的版本。

目前有如下版本：

• iscroll.js，這個版本是常規應用的腳本。它包含大多數經常使用的功能，有很高的性能和很小的體積。
• iscroll-lite.js，精簡版本。它不支持快速跳躍，滾動條，鼠標滾輪，快捷鍵綁定。但若是你所須要的是滾動(特別是在移動平臺) iScroll 精簡版 是又小又快的解決方案（這個能應付大多數場景）。
• iscroll-probe.js，探查當前滾動位置是一個要求很高的任務,這就是爲何我決定創建一個專門的版本。若是你須要知道滾動位置在任何給定的時間,這是iScroll給你的。（我正在作更多的測試,這可能最終在常規iscroll.js腳本，請留意）。
• iscroll-zoom.js，在標準滾動功能上增長縮放功能。
• iscroll-infinite.js，能夠作無限緩存的滾動。處理很長的列表的元素爲移動設備並不是易事。 iScroll infinite版本使用緩存機制,容許你滾動一個潛在的無限數量的元素。

使用方法：

頁面引用：

<script type="text/javascript" src="iscroll.js"></script>

HTML結構以下:

1 <div id="wrapper">
2     <ul>
3         <li>...</li>
4         <li>...</li>
5         ...
6     </ul>
7 </div>

JS初始化:

1 <script type="text/javascript">
2 var myScroll = new IScroll('#wrapper');
3 </script>

 iScroll配置參數說明：

1 var myScroll = new IScroll('#wrapper', {
2     mouseWheel: true, //是否監聽鼠標滾輪事件
3     scrollbars: true,      //是否顯示默認滾動條
4     preventDefault: true,//是否屏蔽默認事件
5     preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, //列出哪些元素不屏蔽默認事件
6     probeType: 3,//須要使用 iscroll-probe.js 才能生效 probeType ： 1   滾動不繁忙的時候觸發;probeType ： 2   滾動時每隔必定時間觸;probeType ： 3   每滾動一像素觸發一次
7     
8 });

API:

所屬	方法名	說明
滾動	scrollTo(x, y, time, easing)	滾動到： x ， y ，事件， easing 方式 x:int y:int time:int Easing: quadratic | circular | back | bounce | elastic 見 IScroll.utils.ease  對象 例： myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
scrollBy(x, y, time, easing)	滾動到相對於當前位置的某處其他同上
scrollToElement(el, time, offsetX, offsetY, easing)	滾動到某個元素。 el 爲必須的參數offsetX/offsetY ：相對於 el 元素的位移。設爲 true 即爲屏幕中心
分割頁面 snap	goToPage(x, y, time, easing)	根據 options.snap 分割頁面，跳轉到橫向、縱向某頁。 XY 能夠同時生效。
	next() prev()	上一頁，下一頁結合 options.snap使用
縮放	zoom(scale, x, y, time)	縮放容器Scale: 縮放因子
刷新	refresh()	刷新 IScroll
銷燬	destroy()	銷燬 IScroll ，節省資源

事件使用：

beforeScrollStart	用戶點擊屏幕，可是還未初始化滾動前
scrollCancel	初始化滾動後又取消
scrollStart	開始滾動
scroll	滾動中
scrollEnd	滾動結束
flick	輕擊屏幕左、右
zoomStart	開始縮放
zoomEnd	縮放結束

這個在微信中使用仍是存在一些小問題，歡迎你們拍磚，共同交流探討。
喜歡H5，web開發的朋友能夠加羣：374166122

請使用手機"掃一掃"x