(ps:由于使用过程中考虑的局限性可能会存在一些问题,欢迎大家使用并提出问题,空闲时间我会优化问题)
1.使用pulltorefresh.js
2.使用pulltorefresh.css
3.在需要使用的html页面中导入相应的js与css
例:
AUI 是Apicloud 的手机端UI第三方,需要引入Apicloud和AUI中的css样式和js框架**首先:手机项目必须配置config.xml文件 Apicloud官网有详解
**
其次:程序会默认进入index.html页面,开始程序的加载显示
具体代码如下:
1、<meta charset="utf-8">和<meta http-equiv="content-type" content="text/htmlcharset="utf-8">
解释:在HTML5,他们是等价的。使用更短,更容易记住和类型。浏览器支持很好,因为它是设计用来向后兼容的。
2、<meta meta http-equiv="X-UA-Compatible" content="IE=edge">
详解: http://www.cnblogs.com/jinling/p/4719114.html
3、需要引入aui的css样式 在头文件中
例如:外联引入<link rel="stylesheet" type="text/css" href="../css/aui.css">
css 可以在head中引入 :<style type="text/css">
4、修改aui中css的样式必须要!important
例如: .aui-iconfont {
font-size: 22px !important
}
5、设置手机的导航视图:使用盒子div包裹起来
例如:<div class="aui-bar aui-bar-nav aui-bar-warning" id="aui-header"></div>
aui-bar:头部的样式
aui-bar-nav:导航样式
aui-header:js使用
6、引入js框架,调用对应的js方法,获取页面元素位置和内容等,打开和关闭窗口
例如:<script type="text/javascript" src="./script/api.js">
apiready = function() :和js中ready()方法意思差不多,等html加载完执行该方法
api.parseTapmode() :解析元素 tapmode 属性,优化点击事件处理 ,默认页面加载完成后,引擎会对 dom 里面的元素进行 tapmode 属性解析,若是之后用代码创建的 dom 元素,则需要调用该方法后 tapmode 属性才会生效
1、在options中加入如下参数代码(我的代码是在2470行)://原本就有的部分
HWCompositing: true,
useTransition: true,
useTransform: true,
//我加入的部分
minScrollY : 0,
minScrollX : 0
2、在下面不远处(十行以内)加入如下参数:
//新加部分
this.minScrollY = this.options.minScrollY
this.minScrollX = this.options.minScrollX
原先就有的部分
this.translateZ = this.options.HWCompositing &&utils.hasPerspective ? ' translateZ(0)' : ''
3、最后一处修改,在resetPosition方法内,此处直接贴上更改之后的方法,其实真正的修改只是将this.minScrollX修改成了(代码在2830行左右):
resetPosition: function (time) {
var x = this.x,
y = this.y
time = time || 0
if ( !this.hasHorizontalScroll || this.x >this.minScrollX ) {
x = this.minScrollX
} else if ( this.x <this.maxScrollX ) {
x = this.maxScrollX
}
if ( !this.hasVerticalScroll || this.y >this.minScrollY ) {
y = this.minScrollY
} else if ( this.y <this.maxScrollY ) {
y = this.maxScrollY
}
if ( x == this.x &&y == this.y ) {
return false
}
this.scrollTo(x, y, time, this.options.bounceEasing)
return true
},
全部修改内容如上,调用的时候,只需要传入minScrollX、minScrollY参数便可实现下拉后回弹上面的预留位置了。
注:对于scroll的滚动区域小于包裹容器的,iscroll禁止滚动,会造成无法实现下拉刷新,这里有一个小技巧,就是给滚动区域加一个min-height:101%
最后附上此次修改的dome下载地址,由于dome最初也是从别处拿的(最初的dome不能满足需求),其中的css布局方面个人觉得有些不好,但由于最近工作紧张也没有去改,暂时就先这样吧,有空会优化一下的。