iscroll4snap的使用备注

移动端图片滑动浏览场景使用iscroll是比较合适的，工具方便好用，节省大量开发时间。

先说说iscroll使用的方法。

1、引入iscroll的js文件，在head里面或者body尾部都行；

2、构造swipe区域，这里需要注意的是至少包含两层dom结构，形如<div id="wrapper"><ul id="scroller"></ul></div>，wrapper是要绑定的dom对象，为滚动的总区域，超出部分会自动截断；scroller是滚动的内容。iscroll会使用wrapper的第一个子元素进行滚动。

下面给一下示例代码：

HTML:

<div class="pic-wrapper" id="wrapper_pic">
                    <ul class="pic-list">
                        <li>
                            <img src="../tmp/tmp.jpg">
                        </li>
                        <li>
                            <img src="../tmp/tmp.jpg">
                        </li>

</ul>

</div>

Javascript:

var myScroll_pic;

myScroll_pic = new iScroll('wrapper_pic', {
                snap: "li",
                momentum: false,
                hScrollbar: false,
                onScrollEnd: function () {
                }
             });

备注：构造scroll的代码可以放到文档的onload事件中（建议），或者文档底部。

下面就到了我最想说的地方啦，我们知道如果默认的话每次swipe都会让滚动元素滚动wrapper的宽度那么大，那有的时候我们一个wrapper下面会有多个li，每次只想让它滚动一个li的宽度，而不是整个wrapper的宽度。请注意上面js代码中对snap的设置。

snap是元素捕获，它的值是一个元素选择器的字符串，我们可以给tag选择器、也可以给类选择器。本人测试过使用类选择器，是OK的。这样就可以实现让类来控制每次位移的单位量。比如，下面的代码：

<div class="pic-wrapper" id="wrapper_pic">
                    <divl class="pic-list">
                        <div class="demo">
                            <img src="../tmp/tmp.jpg">

    <img src="../tmp/tmp.jpg">
                        </li>
                        <div class="demo">       

      <img src="../tmp/tmp.jpg">

    <img src="../tmp/tmp.jpg">

                        </div>

</ul>

</div>

myScroll_pic = new iScroll('wrapper_pic', {
                snap: ".demo",
                momentum: false,
                hScrollbar: false,
                onScrollEnd: function () {
                }
             });

就能通过demo类选择器每次滚动两张图片。

参考链接：http://www.gafish.net/api/iScroll.html#snap