移动web前端下拉刷新效果
直接复制粘贴 放在页面中即可
<script>
window.onload = function(){
window.addEventListener('touchstart', touchstart, false);
window.addEventListener('touchmove', touchMove, false);
}
var _start = 0;
var _end = 0;
function touchstart(event) {
var touch = event.targetTouches[0];
_start = touch.pageY;
}
function touchMove(event){
var touch = event.targetTouches[0];
_end = ( touch.pageY - _start);
//下滑才执行操作
if(_end > 200){ //200即手机下滑屏幕的距离,超过200则执行刷新动作
location.reload();
}
}
</script>
移动web前端下拉刷新效果的更多相关文章
- 移动端上拉加载,下拉刷新效果Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Swift通天遁地]二、表格表单-(4)使用系统自带的下拉刷新控件,制作表格的下拉刷新效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- [Swift通天遁地]二、表格表单-(6)创建美观的表格弹性下拉刷新效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 关于h5手机端上拉加载和下拉刷新效果-1
1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitb ...
- 手机端轻应用模拟原生的下拉刷新效果(JavaScript)
方案一:使用iscoll等有下拉功能的框架. 分析:因为项目的结构已经基本完成,再使用框架,会与原来的结构互相影响: 方案二:用JavaScript.Jquery写. 分析:可能没有直接使用框架的效果 ...
- Swift 自定义炫酷下拉刷新效果
先来看下效果 下拉刷新 其实下拉刷新没大家想得那么难.本文已第二个为例子.给大家讲解下下拉刷新的做法(完整代码后面会放上) 首先,先搞一个single View Application .然后进Mai ...
- 代码实现Android5.0的下拉刷新效果
如图所示,实现类似与gmail的下拉刷新. 项目地址:https://github.com/stormzhang/SwipeRefreshLayoutDemo 一.在xml文件中定义 这个控件在sup ...
- android使用PullToRefresh实现上拉加载和下拉刷新效果
其实很早前就在博客园中也写过官方的下拉刷新控件SwipeRefreshLayout,但是这个控件仅仅支持下拉刷新,用起来还算可以.然而在我们实际开发应用中,很多地方都不止有下拉刷新,而且还有上拉加载的 ...
- Android下拉刷新效果实现
本文主要包括以下内容 自定义实现pulltorefreshView 使用google官方SwipeRefreshLayout 下拉刷新大致原理 判断当前是否在最上面而且是向下滑的,如果是的话,则加载数 ...
随机推荐
- 理解 Delphi 的类(八) - 关于类的定义
//标准语法 TMyClass1 = class(TObject) end; //如果是继承自 TObject 可以省略 TMyClass2 = class end; // ...
- bash学习
if 的使用 declare -i x=10 if [ $x -lt 14 ];then echo $x'小于14'; elif [ $x -gt 9 ];then echo $x'大于9'; els ...
- 你不知道的Spring配置文件
Spring配置文件是用于指导Spring工厂进行Bean生产.依赖关系注入(装配)及Bean实例分发的"图纸".Java EE程序员必须学会并灵活应用这份"图纸&quo ...
- React学习笔记-6-运行中阶段介绍
运行中可以使用的函数componentWillReceiveProps:父组件修改属性触发,可以修改新属性,修改状态.字面意思,组件将要接收属性,这个函数触发的时机就是组件的属性将要发生改变的时候,但 ...
- 关于ZedGraph
http://www.codeproject.com/Articles/5431/A-flexible-charting-library-for-NET
- Docker常用命令大全
1. 查看docker信息(version.info) # 查看docker版本 $docker version # 显示docker系统的信息 $docker info 2. 对image的操作(s ...
- Mahout推荐算法API详解
转载自:http://blog.fens.me/mahout-recommendation-api/ Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, ...
- js立即调用的函数表达式
1.多种实现 // 下面2个括弧()都会立即执行 (function () { /* code */ } ()); // 推荐使用这个 (function () { /* code */ })(); ...
- ****基于H5的微信支付开发详解[转]
这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...
- linux作业
第二单元 (1)以root用户登录GNOME图形界面 语言支持选择为汉语 (2)使用快捷键切换到虚拟终端2,使用普通用户身份登录,查看系统提示符 (3)使用命令退出虚拟终端2上登录的用户 (4)使用快 ...