angular-momentum-scroll, 在iScroll上,基于AngularJS的动量滚动

分享于 

3分钟阅读

GitHub

  繁體 雙語
Momentum scroll for AngularJS based on iScroll
  • 源代码名称:angular-momentum-scroll
  • 源代码网址:http://www.github.com/wzr1337/angular-momentum-scroll
  • angular-momentum-scroll源代码文档
  • angular-momentum-scroll源代码下载
  • Git URL:
    git://www.github.com/wzr1337/angular-momentum-scroll.git
    Git Clone代码到本地:
    git clone http://www.github.com/wzr1337/angular-momentum-scroll
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/wzr1337/angular-momentum-scroll
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    angular-momentum-scroll

    AngularJS指令通过 iScroll ( http://cubiq.org ) 增加动量滚动。

    演示

    http://wzr1337.github.com 上找到一个演示。

    用法

    • 在页面中包含 scrollable.js 或者 scrollable.min.js

    • 'angular-momentum-scroll' 声明为 Angular 应用程序的依赖项: angular.module('myApp', ['angular-momentum-scroll']);

    • scrollable 属性添加到你选择的容器中:

      • 容器必须设置宽度和高度 !
      • 若要水平滚动容器中的。scroller class必须设置宽度和高度 !
    • 容器根据iScroll文档接受额外的属性 parameters。 e.g.

      <div id="my-cont" style="height: 400px; width: 100%;" scrollable 
      parameters="{{ {vScroll : true, snap: '.row'} }}">
    • 通过通过属性指定回调函数,可以对以下任何处理程序进行 register:

      • onRefresh
      • onBeforeScrollStart
      • onScrollStart
      • onBeforeScrollMove
      • onScrollMove
      • onBeforeScrollEnd
      • onScrollEnd
      • onTouchEnd
      • onDestroy
      • onZoomStart
      • onZoom
      • onZoomEnd
      <div id="my-cont" style="height: 400px; width: 100%;" scrollable
      parameters="{{ {scrollbars : true, snap: '.row'} }}"on-scroll-move="doSometginhg()">...</div>
    • 你可以将变量绑定到curr-page-x和curr-page-y属性。 数据绑定是双向的,因此可以通过编程方式进行滚动,也可以在页面更改时进行通知。

      <div id="my-cont" style="height: 400px; width: 100%;" scrollable
       parameters="{{ {vScroll : true, snap: '.row'} }}" curr-page-y="myPageY">...</div>
    • 你可以观察 isMinY,isMinX和 isMaxX,isMAxY去查找,如果scrlller到达了最后的顶部或者底部,左或者右位置。 这些帮助你构建一个infinitescroll或者类似的。 按如下方式使用它们:

      <ol id='mycontainer' scrollable
       parameters="{{ {vScroll:true, scrollbars: true, snap: 'li'} }}" curr-page-x="currPageX" curr-page-y="currPageY" curr-x="currX" curr-y="currY" is-min-y="isMinY" is-max-y="isMaxY"><li class="listitem" ng-repeat="thing in awesomeThings">{{thing}}</li></ol>

    BASE  angular  滚动  MOM  Iscroll  momentum  
    相关文章