简易h5下拉刷新插件

html-css022

简易h5下拉刷新插件,第1张

前言:第一次写H5页面由于页面中的列表数据需要做分页,搜索了许多相关的下拉刷新插件使用起来都比较复杂,索性自己写了一个较为简单的分页加载相关的插件;

(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布局方面个人觉得有些不好,但由于最近工作紧张也没有去改,暂时就先这样吧,有空会优化一下的。