app-framework学习--Scroller
2024-08-27 04:20:29
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 fortheverticalScroll horizontalScroll useJsScroll lockBounce autoEnable refresh infinite initScrollProgress vScrollCSS hScrollCSS |
方法
|
1
2
3
4
5
6
7
8
9
10
11
|
enable() disable() scrollToBottom(time) scrollToTop(time) scrollTo(obj,time) scrollBy(obj,time) addPullToRefresh() setRefreshContent(string) addInfinite() addInfinite事件clearInfinite() 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
|
//scrollerscrollstart scroll scrollend //pullrefresh-trigger refresh-release refresh-cancel refresh-finish //infiniteinfinite-scroll infinite-scroll-end |
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: width: height: border-radius: border: background: opacity:} |
Examples
在HTML 中加入
|
1
|
||div"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 |
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$.bind(myScroller,"refresh-trigger",function() console.log("Refresh);});//HerevarhideClose;$.bind(myScroller,"refresh-release",function() varthatthis; console.log("Refresh); clearTimeout(hideClose); //For hideClosefunction() console.log("hiding); that.hideRefresh(); }, returnfalse;//tells});//This$.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$.bind(myScroller,"infinite-scroll",function() varselfthis; console.log("infinite); //Append $(this.el).append("<divinfinite"border:2px">Fetching"); //Register $.bind(myScroller,"infinite-scroll-end",function() //unbind $.unbind(myScroller,"infinite-scroll-end"); self.scrollToBottom(); //Example setTimeout(function() $(self.el).find("#infinite").remove(); //We self.clearInfinite(); $(self.el).append("<div>This"); self.scrollToBottom(); }, });}); |
有什么问题能够联系我
官网链接：http://app-framework-software.intel.com/api.php#scroller
欢迎增加学习交流群：333492644
最新文章
- [转]Android ListView 与 RecyclerView 对比浅析—缓存机制
- MySQL时间戳相互转换
- delphi 导出xml文件
- 简单的URL解析
- iOS Mail.app inject kit
- Google 镜像站搜集[转]
- django-CSRF verification failed. Request aborted
- JQuery WEB前段开发
- Quick Cocos2dx 版本更新
- 【网络流】POJ1273 Drainage Ditches
- grep的小技巧
- 解决KafKa数据存储与顺序一致性保证
- IntelliJIdea 2016.2 使用 tomcat 8.5 调试spring的web项目时，bean被实例化两次导致timer和thread被启动了两遍的问题的解决
- Mysql 监控脚本
- centos7.3下curl支持https协议
- Spring事务控制和传递性理解
- Java应用中使用ShutdownHook友好地清理现场
- （三）微信小程序之发送服务通知（模板消息）
- js图形库
- Excel 2007 打开 UTF-8 编码 CSV 文件的乱码BUG