移动端原声js + css3实现下拉刷新
1、引入 jquery.js 和 nativePull.js 文件
<script src="js/jquery-1.8.3.min.js">script>
<script src="js/nativePull.js">script>
2、加载下拉刷新Dom引擎HTML代码块
<div class="pull_down" style="border:none;height: 100%;overflow: auto;">
<div class="loadinges" style="border: 0px #CCC solid;height: 3em;line-height: 3em;text-align: center;">
下拉刷新数据
div>
具体需要手势下拉HTML代码块
div>
3、初始化下拉
<script type="text/javascript">
//滚动加载，下拉
slide_({
container: ".pull_down",
next: function(e) {
// 初始化部分 标识数据
pullDown = "1";
var that = this;
//ajax请求数据，数据返回后隐藏加载中提示
setTimeout(function() {
that.back.call();
$(".loadinges").html("刷新成功！");
},1500);
}
});
script>
测试demo 复制即可》》
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>CSS3 + HTML5 下拉刷新title>
<script src="js/jquery-1.8.3.min.js">script>
<script src="js/nativePull.js">script>
head>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
}
#base {
height: 3rem;
line-height: 3rem;
background-color: #CCC;
color: white;
font-size: 1.2em;
padding-left: 20px;
border-bottom: 1px white solid;
}
style>
<body>
<div class="pull_down" style="border:none;height: 100%;overflow: auto;">
<div class="loadinges" style="border: 0px #CCC solid;height: 3em;line-height: 3em;text-align: center;">
下拉刷新数据
div>
<div id="base">Borther-Coladiv><div id="base">Borther-Coladiv><div id="base">Borther-Coladiv><div id="base">Borther-Coladiv>
div>
<script type="text/javascript">
//滚动加载，下拉
slide_({
container: ".pull_down",
next: function(e) {
// 初始化部分 标识数据
pullDown = "1";
var that = this;
//ajax请求数据，数据返回后隐藏加载中提示
setTimeout(function() {
that.back.call();
$(".loadinges").html("刷新成功！");
},1500);
}
});
script>
body>
html>
nativePull.js 复制》》
var isPageCando = 0; //定义手机是否在屏幕滑动 0:无滑动
var slide_ = function(option) {
var defaults = {
container: '',
next: function() {}
}
var start,
end,
length,
isLock = false, //是否锁定整个操作
isCanDo = false, //是否移动滑块
isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
hasTouch = 'ontouchstart' in window && !isTouchPad;
var obj = document.querySelector(option.container);
var loading = obj.firstElementChild;
var offset = loading.clientHeight;
var objparent = obj.parentElement;
var fn = {
//移动容器
translate: function(diff) {
obj.style.webkitTransform = 'translate3d(0,' + diff + 'px,0)';
obj.style.transform = 'translate3d(0,' + diff + 'px,0)';
},
//设置效果时间
setTransition: function(time) {
obj.style.webkitTransition = 'all ' + time + 's';
obj.style.transition = 'all ' + time + 's';
},
//返回到初始位置
back: function() {
fn.translate(0 - offset);
//标识操作完成
isLock = false;
},
addEvent: function(element, event_name, event_fn) {
if(element.addEventListener) {
element.addEventListener(event_name, event_fn, false);
} else if(element.attachEvent) {
element.attachEvent('on' + event_name, event_fn);
} else {
element['on' + event_name] = event_fn;
}
}
};
fn.translate(0 - offset);
fn.addEvent(obj, 'touchmove', move); //当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
fn.addEvent(obj, 'touchstart', start); //当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发
fn.addEvent(obj, 'touchend', end); //当手指从屏幕上离开的时候触发
// fn.addEvent(obj, 'mousedown', start) //，隐藏或显示元素：
fn.addEvent(obj, 'mousemove', move) //获得鼠标指针在页面中的位置
fn.addEvent(obj, 'mouseup', end) //隐藏或显示元素：
//滑动开始
function start(e) {
//当前滚动条距离顶部的距离：$(".pull_down").scrollTop()
if($(".pull_down").scrollTop() <= 0 && !isLock) {
//标识操作进行中
isLock = true;
isCanDo = true;
var even = typeof event == "undefined" ? e : event;
//保存当前鼠标Y坐标
start = hasTouch ? even.touches[0].pageY : even.pageY;
//消除滑块动画时间
fn.setTransition(0);
loading.innerHTML = '下拉刷新数据';
}
return false;
}
//滑动中
function move(e) {
if(objparent.scrollTop <= 0 && isCanDo) {
isPageCando++;
var even = typeof event == "undefined" ? e : event;
if(isLock) {
end = hasTouch ? even.touches[0].pageY : even.pageY;
}
if(start < end) { //结束指针位置 大于 开始指针位置
even.preventDefault();
//消除滑块动画时间
// fn.setTransition(0);
//移动滑块
if((end - start - offset) / 2 <= 150) {
length = (end - start - offset) / 2;
fn.translate(length);
} else {
length += 0.3;
fn.translate(length);
}
}
}
}
//滑动结束
function end(e) {
if(isCanDo) {
if(isPageCando > 0) {
//判断滑动距离大小
if(end - start >= offset) {
//设置滑块回弹时间
fn.setTransition(1);
//保留提示部分
fn.translate(1);
loading.innerHTML = '正在刷新数据...';
if(typeof option.next == "function") {
option.next.call(fn, e);
}
} else {
//返回初始状态
fn.back();
}
}else {
fn.back();
}
isPageCando = 0;
isCanDo = false;
}
}
}
浏览器切换到 Mobile 模式
转载其他网址，解决滚动条在顶部 点击触发下拉的bug
只为能帮助到使用到得你。。。
QQ群：595377655。问题总是能出现并着手解决的地方，欢迎加入。
http://www.mescroll.com/
