app-framework学习--Scroller

Scroller

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

创建：

2

$(selector).scroller({})//create

$(selector).scroller()//get
the scroller object

属性：

Attributes

1 2 3 4 5 6 7 8 9 10 11

scrollbars                   (bool) ID of DOM elemenet forthe 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) 水平滚动栏

方法

1 2 3 4 5 6 7 8 9 10 11

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()

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//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

1 2 3 4 5 6 7 8 9

.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 中加入

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

js中创建

1 2 3 4 5

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

调用方法

1	myScroller.addPullToRefresh();

从缓存中获取滚动栏

1	varmyScroller=$("#scroll").scroller();//no parameters

Pull to refresh

以下是怎样结合事件和运行下拉刷新的样例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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. varhideClose; $.bind(myScroller,"refresh-release",function() {     varthat = 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);     returnfalse;//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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

myScroller.addInfinite();   //Bind the infinite scroll event $.bind(myScroller,"infinite-scroll",function() {     varself = 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);     }); });

有什么问题能够联系我

官网链接：http://app-framework-software.intel.com/api.php#scroller

欢迎增加学习交流群：333492644