app-framework学习-----Scroller

2

3

4

5

6

7

8

9

10

11

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) 水平滚动条

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)  
滚动到屏幕上的特定元素

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

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;

}

||div
id="scroll"

style=‘width:100%;height:200;‘></div>

2

3

4

5

var

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

   verticalScroll:true,

   horizontalScroll:false,

   autoEnable:true

})

myScroller.addPullToRefresh();

var

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

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.

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

});

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

() {

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

    });

});