Avalon IScroll 移动套件：

@(Work)[Avalon|IScroll]

verison: @lastest 0.1.0

GitHub: http://github.com/EdwonLim/avalon.iscroll

Avalon GitHub & Documents: https://github.com/RubyLouvre/avalon

IScroll GitHub & Documents: https://github.com/cubiq/iscroll

1. 简介

• Avalon makes love with IScroll.
• 新增指令，使Avalon用户更容易使用iScroll。
• 对于ms-repeat或ms-each，支持infinite滚动。

2. 使用方法

当监听 beforescrollstart, scrollcancel, scrollstart, scroll, scrollend, flick, zoomstart, zoomend 中一个或多个事件时，会自动初始化iscroll。

辅助指令 data-scroll="id, optName"

• id: 将通过id挂在vmodel的scrolls对象上，便于用户访问IScroll对象。
• optName: 配置属性的名称，在vmodel上寻找对应的属性值，作为配置。

PS： id可用$占位，options也可使用data-optionKey='optionValue'和vm.iscroll配置，类似于widget配置方式。

注：实际参数请参看IScroll文档。

示例：

HTML :

    <div ms-controller="test">
        <div ms-on-scroll="scroll" data-scroll="scroll1, $opt">
            <ul>
                <li></li>
                ...
            </ul>
        </div>
    </div>

JS :

    require('avalon.iscroll.js', function(avalon) {

        var test = avalon.define('test', function(vm) {
            ...
            vm.$opt = {
                ... // iScroll 配置
            }
            vm.scroll = function() {

            };
            ...
        });

        avalon.scan();

    });

3. infinite滚动 & 特殊配置 & 注意事项

注：本套件依赖于iscroll-infinite，所以将列出一些使用infinite时的注意事项。

3.1. 为什么用infinite滚动？和一般的infinite滚动有何区别？

• 无限滚动，滚到最后加载新数据，在移动端体验比较好。

• iscroll提供的infinite，使用translate进行位移，所以在滚动时，没有进行dom的增添，只是修改某一个节点dom，重绘的范围比较小，从而保证在移动端的执行效率和内存使用量。并且avalon通过model操作view的方式，非常有利于dom节点的数据重新渲染。

3.2. 特殊配置

默认配置：

    {
        showLines: 10, // 显示的数量
        infiniteElements: null, // 重复加载的元素，最好配选择器，默认为avalon array 所绑定的元素
        mouseWheel: false, // 是否支持鼠标滚轮（提出来方便测试）
        infiniteLimit: 25, // 数量极限（到达极限时，会调用getData方法）
        cacheSize: 25, // 缓存数量
        getData: function(start, count) {
            // 加载更多数据的回调
            // 获取数据后，更新源数组即可
            // 同时会触发 el 的 getdata 事件·
        }
    }

其中 showLines 是 ms-iscroll 特殊配置，其他都是iscroll配置。

• showLines: 一屏显示的数量。

事件监听：

可以在元素上监听iscroll的事件，例如ms-on-scrollstart。

包含的事件有：beforescrollstart, scrollcancel, scrollstart, scroll, scrollend, flick, zoomstart, zoomend

3.3. 注意事项

• 如果你的数组名称是list，那么请定义一个僵尸数组list$。（PS：avalon暂时不可以动态添加可监控属性）

    avalon.define('test', function() {
        vm.list = [];
        vm.list$ = [];
    });

• 对于Dom结构，需要满足iscroll-infinite，需要所有item的绝对位置是相同的，组简单的实现是，把item的position设为absolute。

更改的scroll-infinite源码：

• 688行： 增加 this._initInfinite(); 让 scroll 刷新时，也更新 infinite。
• 1433/1434行： 从 this.infiniteElementHeight = this.infiniteMaster.offsetHeight 改为 this.infiniteElementHeight = this.infiniteMaster ? this.infiniteMaster.offsetHeight : 0; ，支持空数据。
• 1443/1444行： 从 this.infiniteUpperBufferSize = Math.floor((this.infiniteLength - elementsPerPage) / 2); 改为 this.infiniteUpperBufferSize = 0; 。原来如果行数不足，会把列表居中，现在改为置顶。