iscroll初體驗

引入

iscroll是什麼？多的概念性讓人看不懂的東西就不說了由於看了也可能看不明白，iscroll主要用於移動端設備，主要包括如下的應用場合：

1. 縮放
2. 拉動刷新
3. 速度和性能提高
4. 精確捕捉元素
5. 自定義滾動條

---

 

用法

- html基本結構

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

注意 ：魷魚只有wrapper裏的第一個子元素才能夠滾動，因此能夠寫成下面的寫法~

<div id="wrapper">              //注意：這裏要設爲id，iscroll.js纔會起做用
    <div id="scroller">
        <p> est laborum.</p>
        <p> est laborum.</p>
        <p> est laborum.</p>        
    </div>
</div>

 

- 引入iscroll.js ，而後讓咱們一塊兒來實例化一個對象啵~

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

<script type="text/javascript">
    var myScroll;
    function loaded(){
        myScroll = new IScroll('#wrapper');
    }    
    document.addEventListener('touchmove',function(e){e.preventDefault();},false)
</script>

 

這樣加上html結構，再加上js咱們就能夠完成一個小demo啦~

 

- 而後咱們來爲IScroll對象添加第二個參數

<script type="text/javascript">
    var myScroll;
    function loaded(){
        myScroll = new IScroll('#wrapper',{
            mouseWheel:true,
            scrollbars:true
        });
    }    

    document.addEventListener('touchmove',function(e){e.preventDefault();},false)
</script>

 

這樣就會驚現自定義滾動條，還能夠滾輪上下移動哦~功能異常強大~並且自定義的滾動條明顯比默認的滾動條好看多了有木有！

固然IScroll對象的第二個參數不僅有這幾個參數，讓咱們在loaded方法裏

console.dir(myScroll.options);

就能夠看到第二個參數裏能夠添加的全部選項,每一個選項不細說啦，接下來給你們介紹幾個比較經常使用有意思的選項

 

- 自定義滾動條

首先咱們將第二個參數中的scrollbars修改成custom，

var myScroll = new IScroll('#wrapper', {
    scrollbars: 'custom'
});

而後咱們來學習幾個略長的英文詞組，爲裝飾咱們的滾動條作下鋪墊~~

• .iScrollHorizontalScrollbar : 應用於水平滾動條
• .iScrollVerticalScrollbar : 應用於垂直滾動條
• .iScrollIndicator : 滾動條指示器
• .iScrollBothScrollbars : 這個樣式將在雙向滾動條顯示的狀況下被加載到容器元素上。一般狀況下其中一個（橫向或者縱向）是可見的

     實在不明白的同窗能夠看看 -->  自定義滾動條demo

 

- 增長事件

若是想要增長事件，如click，就要在第二個參數的選項中加入以下代碼，將click設置爲true

    <script type="text/javascript">
    var myScroll;
    function loaded(){
        myScroll = new IScroll('#wrapper',{
            mouseWheel:true,
            scrollX: true,
            scrollbars:'customs',
            click:true
        });

        var oMe = document.getElementById('me');
        oMe.onclick = function(){
            this.style.background = "red";
        } 
    }    

    document.addEventListener('touchmove',function(e){e.preventDefault();},false)

    </script>

 

 

 

- 數據刷新

對於數據刷新方面，官網上的源碼是這樣描述的

ajax('page.php', onCompletion);

function onCompletion () {
    // Update here your DOM

    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};

也就是使用了myScroll對象上的refresh方法，學習資源上是這樣描述的

　　「這裏調用refresh()使用了零秒等待，若是你須要當即刷新iScroll邊界就是如此使用。固然還有其餘方法能夠等待頁面重繪，但零超時方式至關穩定。」

這讓我想起我對定時器的學習，定時器的第二個參數是0ms，可是實際狀況是它不可能爲0，好奇的同窗能夠試一下~

詳細的應用我搜索到一位同窗的博客文章對ajax數據刷新的應用描述的很是詳細，連接

 

 

- 其餘

對於應用上面，還有許多有意思的應用，如鍵盤控制、縮放功能等等等等,可是最讓我以爲炫酷的效果是 這個 ，簡直驚呆了我~~原來不少咱們看似普通的效果，只要加上本身的創意就會作出讓咱們意想不到的東西！今天學習讓我收穫很多，你呢？