iscroll初始化以及横向滚动需要注意的一些坑

iscroll和vue配合使用

DOM结构

<div id="wrapper">
    <div id="scroller" class="scroller">
        <!-- 头部导航  -->
        <nav id="nav">
            <ul>
                <li v-for="nav in navs">{{ nav }}</li>
            </ul>
        </nav>
        <!-- 列表  -->
        <ul id="list">
            <li v-for="list in lists">{{ list }}</li>
            <li><img src="img/b1.png" /></li>
        </ul>
    </div>
</div>

这里需要注意的时候，iscroll需要一个外层结构，这个是容器，然后里面需要一个内容的容器，iscroll只认wrapper的一个子元素作为滚动的内容，其余的子元素是不会被滚动的，另外记得需要给wrapper加上高度和宽度

JS:

var scrollerVue = new Vue({
        el: "#scroller",
        data: {
            navs: [1,2,3,4,5,6,7,8,9],
            lists: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]
        },
        mounted: function(){
            this.myScroll = new IScroll('#wrapper',{
                scrollbars: true,
                fadeScrollbars: true,
                probeType: 3
            });

            this.navScroll = new IScroll("#nav",{
                scrollX: true,
            })
        }
    })

这里因为使用了vue，所以在mounted初始化的时候是比较靠谱的，因为vue不是那么的熟悉，只知道这里mounted是在元素挂载完成以后才会执行，顺带说一句，在vue里初始化vue实例的时候，貌似是会dom结构都禁用了，还是怎么的，反正在vue初始化完成之前是用不了事件的;

横向滚动的问题：iscroll允许实例化很多个iscroll,所以这里横向滚动的时候就又初始化了一个实例navScroll，注意这里的配置，scrollX:true;这里一定要配置的，表示横向滚动的意思，在这里配置完成了以后，你会发现横向滚动还是用不了，是的还有一个坑，就是内层的宽度需要配置；

css：

html,body,#wrapper{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#wrapper{
    position: relative;
}
#nav ul{
    width: 1000px;//这里是横向滚动的内容宽度，必须要设置上，不然就不起作用，无论你是js动态设置的，还是css写死的，只有内容的宽度大于外层的宽度才可以横向滚动
}

这里在说一下，#wrapper需要设置宽度和高度，#wrapper最好给一个定位，相对定位或者绝对定位都可以;
这将解决大多数滚动器容器大小计算不正确的问题。(比如有图片的时候)