iscroll手冊

時間  2019-11-21
標籤 iscroll 手冊 简体版
原文   原文鏈接

概述：

你們在平常工做中最經常使用的插件是什麼，jQurey？Lazyload？可是這些都是在PC端，可是在移動端最經常使用的插件莫過於iScroll了，iScroll究竟是什麼東西，應該怎麼用？iScroll是個很強大的插件，我也只是略懂皮毛，這裏咱們簡單的介紹一下。

iScroll的產生：

iScroll的產生徹底是由於移動版webkit瀏覽器，例如在iPhone，Android 的移動設備上。

iScroll的使用方法：

iScroll的原理是外層有一個溢出隱藏（overflow:hidden;）的DOM，而後這個區域內的第一個DOM結構會被實例化，其包裹的內容能夠縱向或者橫向的滾動，因此在使用iScroll的時候，滾動元素要儘可能的簡單，減小DOM個數，減小嵌套，由於DOM結構越是複雜iScroll運行起來就越是吃力，有可能會形成某些節點顯示不正常的狀況。 因此，推薦使用的DOM結構以下：
1
2
3
4
5
6
7
8
9
<div id= "wrapper" > //overflow:hidden;
     <ul>
     //只有第一個DOM結構（ul）被實例化，這個DOM能夠縱向或者橫向的滾動，
     //多出的內容會被wrapper的樣式hidden。
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</div>
注意：再次重申，只有wrapper裏的第一個子元素（ul）才能夠被實例化滾動，而且要結合外層的DOM（wrapper）才能實現滾動。
若是 wrapper中有多個ul怎麼辦？很簡單，記住那句話，只有wrapper裏的第一個子元素（ul）才能夠被實例化滾動：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id= "wrapper" > //overflow:hidden;
     <div id= "first" >
         //只有第一個DOM結構(ul)被實例化，這個DOM能夠縱向或者橫向的滾動，
         //多出的內容會被wrapper的樣式hidden
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
         <ul>
             <li>4</li>
             <li>5</li>
             <li>6</li>
         </ul>
     </div>
</div>
看到了吧，只有first會被實例化。 注意：這裏第一個DOM結構的ID（first）能夠不寫，我只是爲了方便你們識別才寫了個ID，可是最外層的ID（wrapper）必定要寫，由於在JS實例化的時候須要填寫這個ID：
1
var myScroll = new iScroll( "wrapper" );

iScroll應該如何實例化：

既然說道了實例化，咱們應該在何時實例化？聽說實例化的方法有不少，可是我沒用過，我只說一種：
（1）在HTML（uw3c.html）頁面底部（body以後html以前）加載iscroll.js與當前頁面的uw3c.js,這樣能確保HTML的DOM結構能加載出來。
（2）在JS插入頁面DOM結構和數據以前實例化iScroll，也就是在JS的最開始實例化，由於以後可能會使用JS來插入DOM或者數據，這樣以來能確保在插入數據以前iScroll已經實例化了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
HTML: //HTML結構
<html >
     <body>
      ...code...
     </body>
      //插入iscroll.js文件
    <script type= "text/javascript" src= "js/iscroll.js" > </script >
     //插入本頁面JS文件
   <script type= "text/javascript" src= "js/uw3c.js" > </script >
</html>
  JS: //JS文件內容
  var myscroll;
  function iscroll(data){
       //實例化iScroll
      myscroll= new iScroll( "wrapper" );
      pageData(data);
  }
  function pageData(obj){
      $( "body" ).html(obj);
      myscroll.refresh(); //當DOM結構發生變化的時候，須要刷新iScroll
  }
  iscroll( "<div>pagedata</div>" );

iScroll中的參數：

在實例化iScroll的時候，能夠傳入兩個參數，第一個參數是實例化的外層的DOM的ID，第二個參數是iScroll執行方法的對象：
1
var myscroll= new iScroll( "wrapper" ,{hScrollbar: false });
或者
1
2
3
4
5
6
var opts = {
                 vScroll: false , //禁止垂直滾動
                 snap: true , //執行傳送帶效果
                 hScrollbar: false //隱藏水平方向上的滾動條
             };
var myscroll = new iScroll( "wrapper" ,opts);
第二個參數內容以下，這個參數會控制iScroll的效果：
1
2
3
4
5
6
7
8
9
10
11
hScroll        false 禁止橫向滾動 true 橫向滾動 默認爲 true
vScroll        false 禁止垂直滾動 true 垂直滾動 默認爲 true
hScrollbar     false 隱藏水平方向上的滾動條
vScrollbar     false 隱藏垂直方向上的滾動條
fadeScrollbar  false 指定在無漸隱效果時隱藏滾動條
hideScrollbar  在沒有用戶交互時隱藏滾動條 默認爲 true
bounce         啓用或禁用邊界的反彈，默認爲 true
momentum       啓用或禁用慣性，默認爲 true ，
                此參數在你想要保存資源的時候很是有用
lockDirection  false 取消拖動方向的鎖定，
                true 拖動只能在一個方向上（up/down 或者left/right）

iScroll中的方法：

固然在第二個參數中，也有一些方法能夠執行：
(1) scrollTo(x, y, time, relative)方法：傳入4個參數：X軸滾動距離，Y軸滾動距離，效果時間，是否相對當前位置。因此例如：
1
2
3
4
//在200毫秒的時間內，Y軸向上滾動100像素；
uw3c.scrollTo(0, -100, 200)
//在200毫秒的時間內，相對於當前位置，X軸向左滾動100像素；
uw3c.scrollTo(-100, 0, 200, true )
(2) refresh()方法：在DOM結構發生改變以後，須要刷新iScroll，不然滾動插件會實例化的不許確：
1
uw3c.refresh(); //刷新iScroll
(3) onPosChange,有沒有一個方法能返回位置的變化？你能夠查詢一下本身所用的iScroll中有沒有onPosChange方法：
1
2
3
4
5
6
7
8
onPosChange: function (x,y){
     if (y < -200){
      //若是Y周向上滾動200像素，$("#uw3c")就顯示，不然就隱藏。
         $( "#uw3c" ).show();
     } else {
         $( "#uw3c" ).hide();
     }
}
（4） onScrollEnd：滾動結束時執行的事件，若是想在滾動結束時出發摸個事件，這個方法就拍上用處了：
1
2
3
4
//滾動結束後，執行的方法，滾動後會出現提示框alert("uw3c.com")
onScrollEnd: function (){
     alert( "uw3c.com" );
}
（5） onRefresh：在DOM結構發生改變以後，須要刷新iScroll，不然滾動插件會實例化的不許確，onRefresh是刷新完iScroll會執行的方法。
（6） onBeforeScrollStart：開始滾動前的時間回調，默認是阻止瀏覽器默認行爲 。
（7） onScrollStart：開始滾動的回調。
（8） onBeforeScrollMove：在內容移動前的回調。
（9） onScrollMove：內容移動的回調。
（10） onBeforeScrollEnd：在滾動結束前的回調。
（11） onTouchEnd：手離開屏幕後的回調。
（12） onDestroy：銷燬實例的回調。

截至到筆者發佈這篇文章時，經過樣式: javascript

Java代碼   收藏代碼
  1. overflow:scroll;  
  2. -webkit-overflow-scrolling:touch;  


IOS5 已經可以支持區域滾動了。可是andriod4 仍是不行... 

iScroll 使用起來很簡單，首先你須要一個合理的DOM結構： html

Java代碼   收藏代碼
  1. <div id="wrapper">  
  2.     <ul id="scroll">  
  3.         <li></li>  
  4.         ...  
  5.         ...  
  6.     </ul>  
  7. </div>  


其次是推薦的樣式： java

Java代碼   收藏代碼
  1. #wrapper {  
  2.     position:relative;  
  3.     z-index:1;  
  4.     width:/* your desired width, auto and 100% are fine */;  
  5.     height:/* element height */;  
  6.     overflow:/* hidden|auto|scroll */;  
  7. }  


官方推薦這樣的結構，由於iscroll只能滾動wrapper裏的第一個子節點，或者說惟一一個子節點才能使得iscroll正確的生效。由於這個節點須要一個絕對定位的CSS屬性，更重要的是這個節點裏所包裹的內容有了一個統一的容器，咱們只須要計算以後修改這個容器的屬性值就能夠達到咱們滾動的效果。 

iscroll 須要兩個參數，第一個很簡單就是外容器的id,第二個參數是一個參數對象。 
經過這個對象能夠傳入iscroll的各項參數來配置iscroll。 
他的參數基本分爲四個部分 

web

  • 基礎
  • 滾動條
  • 放大縮小
  • 事件回調

如下由筆者整理的iScroll參數以及其表明的意思： 瀏覽器

Java代碼   收藏代碼
  1. hScroll: true, //是否水平滾動  
  2. vScroll: true, //是否垂直滾動  
  3. x: 0, //滾動水平初始位置  
  4. y: 0, //滾動垂直初始位置  
  5. bounce: true, //是否超過實際位置反彈  
  6. bounceLock: false, //當內容少於滾動是否能夠反彈，這個實際用處不大  
  7. momentum: true, //動量效果，拖動慣性  
  8. lockDirection: true,  
  9. //當水平滾動和垂直滾動同時生效時，當拖動開始是否鎖定另外一邊的拖動  
  10. useTransform: true, //是否使用CSS形變  
  11. useTransition: false, //是否使用CSS變換  
  12. topOffset: 0, //已經滾動的基準值(通常狀況用不到)  
  13. checkDOMChanges: false, //是否自動檢測內容變化    


checkDOMChanges 這個不是十分靠得住，由於他目前是輪詢檢測offsetWidth、offsetHeight，而後纔去調自身的refresh 從新計算滾動區域，可是有時候只檢測這個不是很準.. app

Java代碼   收藏代碼
  1. // Scrollbar 的相關參數  
  2. hScrollbar: true, //是否顯示水平滾動條  
  3. vScrollbar: true, //同上垂直滾動條  
  4. fixedScrollbar: isAndroid, //對andriod的fixed  
  5. hideScrollbar: isIDevice,  //是否隱藏滾動條  
  6. fadeScrollbar: isIDevice && has3d, //滾動條是否漸隱漸顯  
  7. scrollbarClass: '', //字定義滾動條的樣式名  


經過scrollbar這些參數能夠配置iscroll的滾動條，經過scrollbarClass能夠本身定義一套滾動條的樣式。 webapp

Java代碼   收藏代碼
  1. // Zoom 放大相關的參數  
  2. zoom: false, //默認是否放大  
  3. zoomMin: 1, //放大的最小倍數  
  4. zoomMax: 4, //最大倍數  
  5. doubleTapZoom: 2, //雙觸放大幾倍  
  6. wheelAction: 'scroll', //鼠標滾動行爲（還能夠是zoom）  


這個Zoom我以爲比較好用，對於一個固定顯示圖片區域的相似應用，能夠很是簡單的作到固定滾動，包括兩指放大的應用。 
wheelAction 這個參數是給PC的鼠標滾動定義的，能夠定義爲滾動鼠標滾輪放大。 ide

Java代碼   收藏代碼
  1. // 自定義 Events 的相關參數   
  2. onRefresh: null, //refresh 的回調，關於自身什麼時候調用refresh 後面會繼續談到  
  3. onBeforeScrollStart: function (e) { e.preventDefault(); },   
  4. //開始滾動前的時間回調，默認是阻止瀏覽器默認行爲  
  5. onScrollStart: null, //開始滾動的回調  
  6. onBeforeScrollMove: null, //在內容移動前的回調  
  7. onScrollMove: null, //內容移動的回調  
  8. onBeforeScrollEnd: null, 在滾動結束前的回調  
  9. onScrollEnd: null, //在滾動完成後的回調  
  10. onTouchEnd: null, //手離開屏幕後的回調  
  11. onDestroy: null, //銷燬實例的回調  
  12. onZoomStart: null,  
  13. onZoom: null,   
  14. onZoomEnd: null  


經過了解以上參數，你能夠很是容易的配置本身的iscroll 應用： 
你能夠經過onScrollEnd 事件回調在結束滾動後執行一段你本身的代碼 
你也能夠簡單的新建一個能夠經過雙觸放大的固定滾動區域。 
你也能夠什麼都不作，只是簡單的約定碰到邊界是否反彈，等等。 spa

Java代碼   收藏代碼
  1. var myscroll = new iScroll('wrapper', {  
  2.      hScroll: false, //是否水平滾動  
  3.      vScroll: true, //是否垂直滾動  
  4.      y: 10, //滾動垂直初始位置  
  5.      bounce : false  
  6. });  


固然，在使用時，若是對建立的iscroll 實例保存引用會有不少好處： 
你能夠在內容改變時，DOM結構發生改變時調用 myscroll.refresh() 來從新計算固定滾動區域的內容高度，從而使得你的iscroll工做正常。 
你也能夠在你的應用結束時，用過這個引用調用destroy方法來，銷燬這個iscroll 實例 
等等.... 
固然，iscroll提供的Api也是很是豐富，因此咱們能夠經過使用iscroll來作不少webapp的應用，下一篇文章我將會主要介紹一下iscroll的公用調用方法，以及參數的控制。 插件

參考：
http://www.uw3c.com/jsviews/js02.html
http://cshbbrain.iteye.com/blog/1825976
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程