app-framework学习--Scroller

最新推荐文章于 2018-11-21 20:41:46 发布

原创最新推荐文章于 2018-11-21 20:41:46 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#app-framework #jqmobi

app-framework学习同时被 2 个专栏收录

28 篇文章

订阅专栏

appframework研发

26 篇文章

订阅专栏

Scroller

这个插件允许你创建一个可滚动区域。我们使用的JavaScript滚轮，除非该设备支持 - WebKit的溢出卷轴：触摸。它有许多修复Android版<3和iOS原生的滚动。

创建：

2

 
  $(selector).scroller({})
  //create
 
  $(selector).scroller()
  //get the scroller object

属性：

Attributes

 
      scrollbars                   (bool) ID of DOM elemenet 
      for
      the popup container
     
      verticalScroll               (bool) 允许vertical scrolling
     
      horizontalScroll             (bool) 允许horizontal scrolling
     
      useJsScroll                  (bool) 是否允许 JavaScript scroller
     
      lockBounce                   (bool) Prevent the rubber band effect
     
      autoEnable                   (bool) 自动启用滚动条
     
      refresh                      (bool) 上拉刷新
     
      infinite                     (bool) 启用无限滚动
     
      initScrollProgress           (bool) Dispatch progress on touch move
     
      vScrollCSS                   (string) 垂直滚动条
      
      hScrollCSS                   (string) 水平滚动条

方法

 
        enable()                     启用滚动条
       
        disable()                    禁用滚动条
       
        scrollToBottom(time)         滚动到内容的底部
       
        scrollToTop(time)            滚动到内容顶部
       
        scrollTo(obj,time)           to X / Y 坐标
       
        scrollBy(obj,time)           by X / Y 坐标
       
        addPullToRefresh()           启用下拉刷新的滚动条
        
        setRefreshContent(string)    设置了下拉刷新内容的文字
       
        addInfinite()               addInfinite事件
       
        clearInfinite()              Clear inifinite-scroll-end event
       
        scrollToItem(DOMNode,time)   滚动到屏幕上的特定元素

事件

Events must be registered on the scroller using $.bind()

 
        //scroller object events
       
        scrollstart                  Scrolling started 
       
        scroll                       Scrolling progress 
       
        scrollend                    Scrolling stopped 
       
        //pull to refresh
       
        refresh-trigger              Pull to refresh scroll started
       
        refresh-release              Event when pull to refresh is has happened
       
        refresh-cancel               User cancelled pull to refresh by scrolling
       
        refresh-finish               Pull to refresh has finished and hidden
       
        //infinite scroll
       
        infinite-scroll              User scrolled to the bottom of the content
       
        infinite-scroll-end          User finished scrolling

CSS/Customize

Below is an example used by App Framework's iOS7 theme to customize the look and feel of the popup

 
        .scrollBar { 
       
        position: absolute ;
       
        width: 5px !important;
       
        height: 20px !important;
       
        border-radius: 2px !important;
       
        border: 1px solid black !important;
       
        background: red !important;
       
        opacity: 0 !important;
       
        }

Examples

在HTML 中添加

 
        ||div id=
        "scroll"
        style=
        'width:100%;height:200;'
        ></div>

js中创建

 
        var
        myScroller=$(
        "#scroll"
        ).scroller({
       
        verticalScroll:
        true
        ,
       
        horizontalScroll:
        false
        ,
       
        autoEnable:
        true
       
        })

调用方法

 
        myScroller.addPullToRefresh();

从缓存中获取滚动条

 
        var
        myScroller=$(
        "#scroll"
        ).scroller();
        //no parameters

Pull to refresh

下面是如何结合事件和执行下拉刷新的例子

 
        myScroller.addPullToRefresh();
       
        //User is dragging the page down exposing the pull to refresh message.
       
        $.bind(myScroller,
        "refresh-trigger"
        ,
        function
        () {
       
        console.log(
        "Refresh trigger"
        );
       
        });
       
        //Here we listen for the user to pull the page down and then let go to start the pull to refresh callbacks.
       
        var
        hideClose;
       
        $.bind(myScroller,
        "refresh-release"
        ,
        function
        () {
       
        var
        that = 
        this
        ;
       
        console.log(
        "Refresh release"
        );
       
        clearTimeout(hideClose);
       
        //For the demo, we set a timeout of 5 seconds to show how to hide it asynchronously
       
        hideClose = setTimeout(
        function
        () {
       
        console.log(
        "hiding manually refresh"
        );
       
        that.hideRefresh();
       
        }, 5000);
       
        return
        false
        ;
        //tells it to not auto-cancel the refresh
       
        });
       
        //This event is triggered when the user has scrolled past and the pull to refresh block is no longer available
       
        $.bind(myScroller,
        "refresh-cancel"
        ,
        function
        () {
       
        clearTimeout(hideClose);
       
        console.log(
        "cancelled"
        );
       
        });

infinite scrolling

The following shows how to implement infinite scrolling.

 
        myScroller.addInfinite();
       
        //Bind the infinite scroll event
       
        $.bind(myScroller,
        "infinite-scroll"
        ,
        function
        () {
       
        var
        self = 
        this
        ;
       
        console.log(
        "infinite triggered"
        );
       
        //Append text at the bottom
       
        $(
        this
        .el).append(
        "
       
        <div id="
        infinite
        " style="
        border:2px solid black;margin-top:10px;width:100%;height:20px
        ">Fetching content...</div>
       
        "
        );
       
        //Register for the infinite-scroll-end - this is so we do not get it multiple times, or a false report while infinite-scroll is being triggered;
       
        $.bind(myScroller,
        "infinite-scroll-end"
        ,
        function
        () {
       
        //unbind the event since we are handling it
       
        $.unbind(myScroller,
        "infinite-scroll-end"
        );
       
        self.scrollToBottom();
       
        //Example to show how it could work asynchronously
       
        setTimeout(
        function
        () {
       
        $(self.el).find(
        "#infinite"
        ).remove();
       
        //We must call clearInfinite() when we are done to reset internal variables;
       
        self.clearInfinite();
       
        $(self.el).append(
        "
       
        <div>This was loaded via inifinite scroll<br>More Content</div>
       
        "
        );
       
        self.scrollToBottom();
       
        }, 3000);
       
        });
       
        });