html实现绳子下拉刷新,【UI组件】——用jQuery做一个上拉刷新
技术要点：
1、jQuery的插件写法
2、上拉刷新步骤分解
3、css样式
jQuery的插件写法：
$.fn.pluginName = function() {
return this.each(function () {
fn();
})
};
上拉刷新步骤分解：
上拉刷新可以分解成三个部分：一是开始(start)，记录当前鼠标的位置；二是移动(move)，根据下拉的位移响应不同的视图；三是结束(end)，刷新页面。
;!function ($) {
"use strict";
var PTR = function (ele) {
this.container = $(ele);
this.container.addClass('pull-to-refresh');
this.distance = 60; // 设置参考的下拉位移
this.attachEvent();
};
// 判断是否有touch事件发生
var isTouch = (function () {
var isSupportTouch = !!'ontouchstart' in document || window.documentTouch;
return isSupportTouch;
})();
var touchEvents = {
start: isTouch ? 'touchstart': 'mousedown',
move: isTouch ? 'touchmove':'mousemove',
end: isTouch ? 'touchend': 'mouseup'
};
// 获取事件发生时相对于文档的距离(含滚动距离)
function getTouchPosition(e) {
var e = e.orinalEvent || e;
console.log(e)
if(e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend') {
return {
x: e.targetTouches[0].pageX,
y: e.targetTouches[0].pageY
}
}else {
return {
x: e.pageX,
y: e.pageY
}
}
};
PTR.prototype.touchStart = function (e) {
var p = getTouchPosition(e);
this.start = p;
this.diffX = this.diffY = 0;
};
PTR.prototype.touchMove = function (e) {
if(this.container.hasClass('refreshing')) return;
if(!this.start) return false;
var p = getTouchPosition(e);
this.diffX = p.x - this.start.x;
this.diffY = p.y - this.start.y;
if(this.diffY < 0) return;
this.container.addClass('touching');
e.preventDefault();
e.stopPropagation();
// 设置container的位移小于页面滚动的距离，给人一种用力下拉的错觉，提升用户体验
this.diffY = Math.pow(this.diffY, .8);
this.container.css('transform', 'translate3d(0,'+ this.diffY +'px, 0)');
if(this.diffY < this.distance) {
this.container.removeClass('pull-up').addClass('pull-down')
}else {
this.container.removeClass('pull-down').addClass('pull-up')
}
};
PTR.prototype.touchEnd = function (e) {
var _this = this;
this.start = false;
this.container.removeClass('pull-down');
this.container.removeClass('pull-up');
this.container.removeClass('touching');
this.container.css('transform','');
if(this.diffY >= this.distance) {
this.container.addClass('refreshing');
this.container.trigger('pull-to-refresh')
}
};
// 事件处理程序，通过$.proxy(fn, content)绑定执行函数的上下文。
PTR.prototype.attachEvent = function () {
var ele = this.container;
ele.on(touchEvents.start, $.proxy(this.touchStart, this));
ele.on(touchEvents.move, $.proxy(this.touchMove, this));
ele.on(touchEvents.end, $.proxy(this.touchEnd, this));
};
// 实例化构造函数
var pullToRefresh = function (ele) {
new PTR(ele)
};
var pullToRefreshDone = function (ele) {
$(ele).removeClass('refreshing');
};
// jQuery 插件编写的一般模式
$.fn.pullToRefresh = function () {
// return 是插件可链式调用
// this 在这里是一个jQuery对象，相当于$(ele)。因为在即时执行函数作用域中，没必要用“$(this)”的方式来把this包裹到一个jQuery对象中，因为this本身已经是被包装好的jQuery对象。
// this.each()使插件代码为多元素集合中的每个元素单独起作用
return this.each(function () {
pullToRefresh(this);
})
};
$.fn.pullToRefreshDone = function () {
return this.each(function () {
pullToRefreshDone(this);
})
}
}(window.jQuery);
HTML代码如下：
Titlep {
margin-top: 0;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet aperiam, architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
$(function () {
$(document.body).pullToRefresh().on('pull-to-refresh', function () {
setTimeout(function () {
$(document.body).pullToRefreshDone();
}, 2000)
});
})
CSS代码如下：
.pull-to-refresh {
margin-top: -50px;
transition: transform .4s;
}
.pull-to-refresh .pull-to-refresh-preloader,
.pull-to-refresh .up,
.pull-to-refresh .refresh {
display: none;
}
.pull-to-refresh.refreshing {
transform: translate3d(0,50px,0);
}
.refreshing .pull-to-refresh-arrow,
.refreshing .down,
.refreshing .up {
display: none;
}
.refreshing .refresh,
.refreshing .pull-to-refresh-preloader {
display: inline-block;
}
.pull-to-refresh_layer {
height: 30px;
line-height: 30px;
padding-bottom: 10px;
}
.pull-down .pull-to-refresh_layer .up,
.pull-down .pull-to-refresh_layer .refresh {
display: none;
}
.pull-down .pull-to-refresh_layer .down{
display: inline-block;
}
.pull-up .pull-to-refresh_layer .up{
display: inline-block;
}
.pull-up .pull-to-refresh_layer .down,
.pull-up .pull-to-refresh_layer .refresh {
display: none;
}
.pull-up .pull-to-refresh-arrow {
transform: rotate(180deg) translate3d(0, 0, 0);
}
.pull-to-refresh-arrow {
display: inline-block;
z-index:;
margin-right: 4px;
transition-duration: 300ms;
transform: rotate(0deg) translate3d(0, 0, 0);
}
.pull-to-refresh_layer {
display: inline-block;
}
.pull-to-refresh-preloader {
display: inline-block;
}
.pull-down {
}
.pull-up {
}
.down {
display: inline-block;
}
.up {
display: inline-block;
}
.refresh {
display: inline-block;
}
jQuery手机端上拉刷新下拉加载更多页面
基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码:
用jquery写一个上拉加载
/*可加载页面吗*/function canLoadMore() { return $('.loadin').length < 1;}/*移除正在加载字样*/function removeMor ...
vux (scroller)上拉刷新、下拉加载更多
1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性
iOS动画进阶 - 实现炫酷的上拉刷新动效
移动端訪问不佳,请訪问我的个人博客 近期撸了一个上拉刷新的小轮子.仅仅要遵循一个协议就能自己定义自己动效的上拉刷新和载入,我自己也写了几个动效进去,以下是一个比較好的动效的实现过程 先上效果图和git ...
【转】vux (scroller)上拉刷新、下拉加载更多
1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性
用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
基于better-scroll封装一个上拉加载下拉刷新组件
1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
vue 上拉刷新组件
背景,项目中经常会出现需要上拉加载更多或者下拉刷新的需求,一直以来呢都是借用各种UI库来实现,但是不知道啥情况,最近在使用的时候,一直有问题,出不了效果,然人很恼火,于是只能自己动手来实现以下, 这次 ...
Android UI之下拉刷新上拉刷新实现
在实际开发中我们经常要用到上拉刷新和下拉刷新,因此今天我写了一个上拉和下拉刷新的demo,有一个自定义的下拉刷新控件 只需要在布局文件中直接引用就可以使用,非常方便,非常使用,以下是源代码: 自定义的 ...
随机推荐
C# EasyUI树形结构权限管理模块
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 本节和大家探讨下C#使用EasyUI树形结构/Tree构 ...
flex 添加svn插件
http://blog.csdn.net/gangan1345/article/details/7926848
压力测试 php-fpm 优化
webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装:引用wget http: ...
C primer plus 练习题 第五章
1. #include #define MINU 60 int main() { int minute, hour, m; printf("请输入分钟:&qu ...
Linux命令-date
[root@localhost ~]# date 2016年 09月 07日 星期三 :: CST [root@localhost ~]# date "+%Y" [root@loc ...
HDOJ ----Phone List
Phone List Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
九度OJ 1068 球半径和数量 (模拟)
题目1068:球的半径和体积 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4797 解决:1696 题目描写叙述: 输入球的中心点和球上某一点的坐标,计算球的半径和体积 输入: 球的中心 ...
MySQL和MySQL的注释方式
MySQL的注释方式 mysql 服务器支持如下几种注释方式: (1) # 到该行结束 # 这个注释直到该行结束 mysql> SELECT 1+1; (2)-- 到该行结束 ...
co模块源码学习笔记
// Sorrow.X --- 添加注释,注释纯属个人理解 /** * slice变量 引用 数组的 slice方法 */ var slice = Array.prototype.slice; /** ...
vs项目的属性页面总结
本文主要针对vs中属性页面的相关选项含义进行了总结.