app-framework学习--Scroller

Scroller

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

创建：

$(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 中加入

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

js中创建

varmyScroller=$("#scroll").scroller({

verticalScroll:true,

horizontalScroll:false,

autoEnable:true

})

调用方法

1	`myScroller.addPullToRefresh();`

从缓存中获取滚动栏

1	`varmyScroller=$("#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.

varhideClose;

$.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);

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.

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

});

有什么问题能够联系我

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

欢迎增加学习交流群：333492644