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数据刷新的应用描述的很是详细，连接

 

 

- 其余

对于应用上面，还有许多有意思的应用，如键盘控制、缩放功能等等等等,可是最让我以为炫酷的效果是 这个 ，简直惊呆了我~~原来不少咱们看似普通的效果，只要加上本身的创意就会作出让咱们意想不到的东西！今天学习让我收获很多，你呢？