Skip to content

EdwonLim/avalon.iscroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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-repeatms-each,支持infinite滚动。

2. 使用方法

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

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

  • id: 将通过id挂在vmodelscrolls对象上,便于用户访问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 事件·
        }
    }

其中 showLinesms-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的绝对位置是相同的,组简单的实现是,把itemposition设为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; 。原来如果行数不足,会把列表居中,现在改为置顶。

About

Avalon make love with iScroll.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published