html5实现下拉刷新页面,原生js实现简单的下拉刷新功能

前言：

我们在浏览移动端web页面的时候，经常会用到下拉刷新。

现在我们用原生的js实现这个非常简单的下拉刷新功能。

(温馨提示：本文比较基础，功能也很简单。写的不好的地方，希望大神提点一二。)

一、创建简单的html页面：

假设代码里的float-box是一个主页面。

二、封装下拉刷新的功能模块：

(1)首先创建一个Slide构造函数，用来初始化属性与函数。

function Slide(dom){

this.start_y=null;//手指滑动屏幕的初始位置

this.end_y=null;//手指滑动屏幕的结束位置

this.render(dom);//初始化下拉功能的render函数，这里的dom参数是你的主页面。

}

(2)编写render函数

render函数是用来动态创建下拉刷新的动画图。现在我们在Slide原型上编写render函数。

Slide.prototype={

render:function(dom){

//拿到body节点

var body = document.getElementsByTagName('body');

//创建div，用来显示下拉效果。这个div有'正在刷新。。' 和 '下拉刷新' 这个两个子节点。

var newItem = document.createElement('div');

//给div设置class属性，该class是下拉效果的样式

newItem.className = 'slide-wrap';

//利用innerHTML将 '正在刷新。。。' 和 '下拉刷新' 这两个子节点插入到上面创建的div中。

newItem.innerHTML = '

正在刷新。。。

'+'

下拉刷新

';

//然后将创建的div插入到主页面的前面

body[0].insertBefore(newItem