# iscroll
[http://cubiq.org/iscroll-5](http://cubiq.org/iscroll-5)
它是什么?
* 模擬原生滾動小姑
它能干什么?
* 表格滾動
* 下拉刷新
* 圖片左右滑動展示
### 版本說明
針對iScroll的優化。為了達到更高的性能,iScroll分為了多個版本。你可以選擇最適合你的版本。 目前我們有以下版本:
* iscroll.js,這個版本是常規應用的腳本。它包含大多數常用的功能,有很高的性能和很小的體積。
* iscroll-lite.js,精簡版本。它不支持快速跳躍,滾動條,鼠標滾輪,快捷鍵綁定。但如果你所需要的是滾動(特別是在移動平臺) iScroll 精簡版 是又小又快的解決方案。
* iscroll-probe.js,探查當前滾動位置是一個要求很高的任務,這就是為什么我決定建立一個專門的版本。如果你需要知道滾動位置在任何給定的時間,這是iScroll給你的。(我正在做更多的測試,這可能最終在常規iscroll.js腳本,請留意)。
* iscroll-zoom.js,在標準滾動功能上增加縮放功能。
* iscroll-infinite.js,可以做無限緩存的滾動。處理很長的列表的元素為移動設備并非易事。 iScroll infinite版本使用緩存機制,允許你滾動一個潛在的無限數量的元素。
特別熟的時候在考慮使用定制版本
打開demo/simple
### html
copy html
~~~
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<ul>
<li>Pretty row 1</li>
...
<li>Pretty row 50</li>
</ul>
</div>
</div>
<div id="footer"></div>
~~~
記住#wrapper,它是核心
### css
另外就是css,把里面的css都copy到iscroll.css里,在html里引入即可
### js
~~~
<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', { mouseWheel: true });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
~~~
調用方式
~~~
<body onload="loaded()">
~~~
改成zepto的domready里
~~~
$(function(){
alert('dom ready');
loaded () ;
});
~~~
這樣就完成了基本操作
[http://127.0.0.1:3010/demo/helloworld-iscroll.html](http://127.0.0.1:3010/demo/helloworld-iscroll.html)

### 關于selector
iscroll.js 249行
~~~
this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
~~~
### iscroll默認屏蔽了部分點擊事件
比如你在#wrapper內部放a標簽或button的click事件是綁定補上的。需要配置
~~~
myScroll = new IScroll('#wrapper', {
mouseWheel: true,
click: true
});
~~~
### 其他選項和事件回調
選項和方法
* 各種動畫,外觀,滾動條等
* 下拉刷新
* 無限滾動
* 分頁indicator
* 跳轉到某頁
事件回調(用生命周期去理解)
* beforeScrollStart,在用戶觸摸屏幕但還沒有開始滾動時觸發。
* scrollCancel,滾動初始化完成,但沒有執行。
* scrollStart,開始滾動
* scroll,內容滾動時觸發,只有在scroll-probe.js版本中有效,請參考onScroll event。
* scrollEnd,停止滾動時觸發。
* flick,用戶打開左/右。
* zoomStart,開始縮放。
* zoomEnd,縮放結束。
對比一下[jquery插件](https://github.com/i5ting/i5ting.jquery.tab/blob/master/example/index.html)
~~~
$('.wrap1').i5ting_jquery_tab({
fix_height :'200px',
tab_changed:function(current_index){
console.log(current_index);
}
});
~~~
### 總結
* html
* css
* js
- 前言
- 1 skill
- 1.1 Coding WebIDE
- 1.2 git
- 1.3 extra practice
- 1.4 預習
- 2 nodejs入門
- 2.1 入門
- 2.2 安裝
- 2.3 helloworld
- 2.4 commonJS規范
- 2.5 模塊導出
- 2.6 Nodejs代碼調試
- 2.7 編寫Nodejs模塊
- 2.8 最小化問題
- 2.9 隨堂練習
- 3 異步流程控制
- 3.1 什么時候會用到異步流程控制
- 3.2 簡單做法async模塊
- 3.3 Promise/a+規范
- 3.4 Node.js Promise/a+實現
- 3.5 生成器Generators/yield
- 3.6 Async函數/Await
- 3.7 神奇的co
- 3.8 5種 yieldable
- 3.9 學習重點
- 3.10 隨堂練習
- 4 express和微信開發入門
- 4.1 入門
- 4.2 connect
- 4.3 靜態Http服務器
- 4.4 那些預處理器
- 4.5 路由
- 4.6 視圖與模塊引擎
- 4.7 中間件
- 4.8 更多實踐
- 4.9 微信入門
- 4.10 隨堂練習:完成登錄、注冊功能
- 5 微信實例與H5實踐
- 5.1 微信基礎和sandbox
- 5.2 公眾號菜單和自動回復
- 5.3 微信OAuth用戶授權
- 5.4 微信分享
- 5.5 wechat-api
- 5.6 H5-上篇
- 5.7 H5-下篇
- 5.8 隨堂練習
- 6 weui實戰
- 6.1 使用bower
- 6.2 移動端抽象
- 6.3 優化滑動列表
- 6.4 weui
- 6.5 讓weui和iscroll結婚
- 6.6 優化事件
- 6.7 how-to-write-h5
- 6.8 優化無止境
- 6.9 隨堂練習
- 7 微信支付
- 7.1 吹個牛
- 7.2 支付概述
- 7.3 科普幾個概念
- 7.4 準備
- 7.5 調試
- 7.6 公眾號支付(JSAPI)
- 7.7 對賬單
- 7.8 數據處理
- 7.9 隨堂練習
- 8 項目實戰《付費課程系統MVP》
- 8.1 需求分析
- 8.2 ui/ue
- 8.3 技術棧
- 8.4 模型
- 8.5 靜態api
- 8.6 開發
- 8.7 部署
- 8.8 監控
- 8.9 數據統計
- 8.10 demo
- 9 高級篇
- 9.1 前后端分離實踐?
- 9.2 如何展望未來的大前端
- 9.3 容器和微服務
- 10 答疑問題收集