infinite-list, javascript中的无限列表,滚动 60fps

分享于 

6分钟阅读

GitHub

  繁體 雙語
Infinite list in javascript that scrolls in 60fps
  • 源代码名称:infinite-list
  • 源代码网址:http://www.github.com/roeierez/infinite-list
  • infinite-list源代码文档
  • infinite-list源代码下载
  • Git URL:
    git://www.github.com/roeierez/infinite-list.git
    Git Clone代码到本地:
    git clone http://www.github.com/roeierez/infinite-list
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/roeierez/infinite-list
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    InfiniteList

    从你的移动设备中查看 Live演示插件。

    移动设备的60fps 无限可以滚动列表。 这里有一些实现无限滚动的实现。 它的中最好的是,只有用户在屏幕上看到的内容,并使用GPU加速翻译项目。 这些技术也是在这个实现中使用的,但是为了实现复杂的on。

    此外,这里列表实现了以下功能:

    • 以类似于iOS和Android的方式在UITableView和RecyclerView中回收Dom元素。
    • 在系统繁忙或者帧速率频率即将降低时检测,跳过不必要的工作以启用平滑滚动
    • 让用户可以使用他喜欢的任何渲染技巧。 这使得可以使用React,例如,呈现回收项并利用列表项的高性能呈现。

    快速启动

    var parentElement =...var infiniteList =newInfiniteList(
     {
     initialPage: {
     itemsCount:100000 },
     itemRenderer:function(index, domElement){
     domElement.innerHTML="Item "+ index;
     },
     /** This methos is optional, if you know the height you should implement it, otherwise you can omit it and  the list will query the DOM for the element height after it is rendered. This extra read height might have a performance penalty but for most use cases it should not be noticeable. **/itemHeightGetter:function(index){
     return50;
     }
     }
    ).attach(parentElement)

    itemRenderer参数的第一个参数是索引,第二个参数是 DOMElement。 第一次呈现这里元素时,它是空的DIV。 以后,由于滚动操作不可以见,因这里该DIV不会被销毁,但是缓存和回收后再使用。 下次呈现这里类型的项时,DOMElement 可能是具有其他项数据的DIV。 这样用户只需更新修改后的DOM元素,而不用重新创建整个HTML内容。

    安装

    无限列表使用通用模块定义,所以你可以将它与CommonJS和RequireJS一起使用。

    require('infinite-list')

    define(['[path to list project]/dist/InfiniteList.js'], function(list){
     //your code goes here});

    浏览器中的

    如果你需要它作为从html文件引用的独立脚本,那么只需包含 dist/InfiniteList.js,并且你将它放在全局范围。

    中的

    
    npm install infinite-list
    
    
    
    

    Bower

    
    bower install infinite-list
    
    
    
    

    示例

    若要生成 exapmles:

    
     npm update
    
    
     cd examples
    
    
     webpack
    
    
    
    

    下面是"生成"目录下的示例文件。

    API

    构造函数( 配置)

    创建 InfinteList。config具有以下属性:

    initialPage

    初始页面配置,有两个属性:

    
    1. itemsCount [Number] - The number of items in the list.
    
    
    2. hasMore [Boolean] - True if we have more items to load (paging)
    
    
    
    
    确定是使用显式宽度还是测量宽度的一种简便方法( )

    当需要呈现项时调用的呈现器方法。 这里方法应使用HTML标记填充 DOMElement。

    函数 loadMoreRenderer ( 索引,DOMElement )

    要获取新页的呈现器方法即将获取,并且应呈现loadMore组件。 这里方法应使用HTML标记填充 DOMElement。

    函数 itemHeightGetter ( 索引)

    按索引返回项的高度

    函数 itemTypeGetter ( 索引)

    根据项的索引返回项的类型。 这里类型用作回收元素的键,这意味着具有相同类型的项可能共享相同的DOMElement ( 如果它们在同一时刻不可见)。

    函数 pageFetcher ( fromIndex,回调)

    当列表滚动到末尾并且'hasMore'值为 true 时,将调用这里方法。 列表将呈现"正在加载。'组件并等待回调返回。 用户应该使用两个参数来提供回调:

    • pageItemsCount - 这里页面中加载的项的数目
    • hasMore - 还有更多要加载的项目或者这是列表的最后一页。

    scrollToItem ( 索引,动画)

    接收项索引并将列表滚动到具有/不带动画的项位置的函数

    刷新( )

    指示列表再次呈现对用户可见的项的函数。 当用户更改列表的数据并希望刷新UI时,通常使用这里方法。

    refreshItemHeight ( 索引)

    指示列表按索引计算项的高度的函数。 当列表项在第一次呈现后更改时有用,例如下载和呈现未知大小的图像。 在这个用例中,你可能希望在图像加载之后调用这个函数,并且大小是已知的。 有关如何使用这里方法的示例,你可以在示例目录中浏览'flickr'示例。


    JAVA  Javascript  lis  列表  INF  滚动  
    相关文章