简易h5下拉刷新插件

html-css027

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

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

(ps:由于使用过程中考虑的局限性可能会存在一些问题,欢迎大家使用并提出问题,空闲时间我会优化问题)

1.使用pulltorefresh.js

2.使用pulltorefresh.css

3.在需要使用的html页面中导入相应的js与css

例:

整体布局:

首先需要引入React基础库,dom库,jsx解析库和移动端Jquery库(用于动态请求异步加载数据),然后创建一个Div,引入自己的组建。

整个应用组件

解析:

1、首先对于组建进行初始化状态设置,当组建被加载后,默认加载第一页数据;

2、当进行下拉刷新时,设置状态为第一页并获取第一页数据;

3、当上拉加载更多时,状态为下一页,并获取下一页的数据。

通过Ajax获取新闻数据,对Data进行相应的处理,并进行对应的dom渲染。

** 渲染整个app**

** 静态常量**

子列表项组件,只负责渲染外面传递给他的数据(css设计样式)

** 列表组件**

列表组建下拉刷新解析:

1、通过refs找到滚动的容器scroller,给它添加监听事件,为了兼容电脑端和移动端,需要监听触摸事件和鼠标事件;

2、当触摸开始或鼠标按下时,回调touchstart函数,判断是否滚动到容器顶端,如果滚动到顶端,再判断是否是手机触摸事件,是就记录第一个触摸点的X,Y值,不是就记录电脑鼠标按下的位置;

3、当触摸移动或鼠标移动时,回调touchMove函数,判断是否是触摸状态,同时记录下触摸移动的距离(如果X方向上的位移大于Y方向,则认为是左右滑动并返回):

4、当触摸结束或鼠标抬起时,回调touchEnd函数。若滚动容器在下拉中,但还没到刷新阀值,经过0.3S位移回到0;若已经达到刷新阀值,经过0.1s位移为刷新阀值,显示“加载”,并触发冲外面传进来的刷新回调函数;

列表组建加载更多解析:

1、监听滚动加载:当滚动容器滚动时,回调滚动加载函数;

2、如果是滚动加载状态则返回;

3、当容器滚动总高度- 容器滚动可见高度-滚过的高度小于滚动加载阀值时,设置滚动加载状态,触发从外面传进来的加载更多回调函数。

列表下拉跟随解析:

transformScroller(time, translate)传入两个参数:时间和距离

利用 transition 和transform 改变位移,transition 属性设置 'all ' + time + 's ease-in-out'表示过渡阶段慢快慢

transform 属性设置'translate3d(0, ' + translate + 'px, 0)'位移过程更流畅

当有新的属性需要更新时,也就是网络数据回来之后,把新的数据填进列表;如果之前是下拉刷新状态,恢复;如果之前是滚动加载状态,恢复。

最后渲染列表组建,通过map循环把子列表数据展示出来。

效果图如下:

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 属性才会生效