分享一个discuz touch端的jQuery下拉刷新组件
最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/img/',不多说直接上代码
var pullrefresh = {
init : function() {
var pos = {};
var status = false;
var divobj = null;
var contentobj = null;
var reloadflag = false;
$('body').on('touchstart', function(e) {
e = mygetnativeevent(e);
pos.startx = e.touches[0].pageX;
pos.starty = e.touches[0].pageY;
})
.on('touchmove', function(e) {
e = mygetnativeevent(e);
pos.curposx = e.touches[0].pageX;
pos.curposy = e.touches[0].pageY;
if(pos.curposy - pos.starty < 0 && !status) {
return;
}
if(!status && $(window).scrollTop() <= 0) {
status = true;
divobj = document.createElement('div');
divobj = $(divobj);
divobj.css({'position':'relative', 'margin-left':'-85px'});
$('body').prepend(divobj);
contentobj = document.createElement('div');
contentobj = $(contentobj);
contentobj.css({'position':'absolute', 'height':'30px', 'top': '-30px', 'left':'50%'});
contentobj.html('<img src="'+ STATICURL + 'icon_arrow.gif" style="vertical-align:middle;margin-right:5px;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);"><span id="refreshtxt">下拉可以刷新</span>');
contentobj.find('img').css({'-webkit-transition':'all 0.5s ease-in-out'});
divobj.prepend(contentobj);
pos.topx = pos.curposx;
pos.topy = pos.curposy;
}
if(!status) {
return;
}
if(status == true) {
var pullheight = pos.curposy - pos.topy;
if(pullheight >= 0 && pullheight < 150) {
divobj.css({'height': pullheight/2 + 'px'});
contentobj.css({'top': (-30 + pullheight/2) + 'px'});
if(reloadflag) {
contentobj.find('img').css({'-webkit-transform':'rotate(180deg)', '-moz-transform':'rotate(180deg)', '-o-transform':'rotate(180deg)', 'transform':'rotate(180deg)'});
contentobj.find('#refreshtxt').html('下拉可以刷新');
}
reloadflag = false;
} else if(pullheight >= 150) {
divobj.css({'height':pullheight/2 + 'px'});
contentobj.css({'top': (-30 + pullheight/2) + 'px'});
if(!reloadflag) {
contentobj.find('img').css({'-webkit-transform':'rotate(360deg)', '-moz-transform':'rotate(360deg)', '-o-transform':'rotate(360deg)', 'transform':'rotate(360deg)'});
contentobj.find('#refreshtxt').html('松开可以刷新');
}
reloadflag = true;
}
}
e.preventDefault();
})
.on('touchend', function(e) {
if(status == true) {
if(reloadflag) {
contentobj.html('<img src="'+ STATICURL + 'icon_load.gif" style="vertical-align:middle;margin-right:5px;">正在加载...');
contentobj.animate({'top': (-30 + 75) + 'px'}, 618, 'linear');
divobj.animate({'height': '75px'}, 618, 'linear', function() {
window.location.reload();
});
return;
}
}
if(divobj != null)// fixed bugs by Nelson 20160818
{
divobj.remove();
}
divobj = null;
status = false;
pos = {};
});
}
}; function mygetnativeevent(event) { while(event && typeof event.originalEvent !== "undefined") {
event = event.originalEvent;
}
return event;
}
分享一个discuz touch端的jQuery下拉刷新组件的更多相关文章
- SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件
SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件. Why? 下拉刷新这样的控件.想必大家用的太多了,比方使用非常多的XListView等. 近期.项目中非常多列表都 ...
- 打造通用的Android下拉刷新组件(适用于ListView、GridView等各类View)
前言 近期在做项目时,使用了一个开源的下拉刷新ListView组件.极其的不稳定,bug还多.稳定的组件又写得太复杂了,jar包较大.在我的一篇博客中也讲述过下拉刷新的实现,即Android打造(Li ...
- Google自己的下拉刷新组件SwipeRefreshLayout
SwipeRefreshLayout SwipeRefreshLayout字面意思就是下拉刷新的布局,继承自ViewGroup,在support v4兼容包下,但必须把你的support librar ...
- Android内置下拉刷新组件SwipeRefreshLayout
也许下拉刷新之前,你可能会使用一些第三方的开源库,例如PullToRefresh, ActionBar-PullToRefresh等待,但现在有的正式组成部分---SwipeRefreshLayout ...
- Android之SwipeRefreshLayout下拉刷新组件
SwipeRefreshLayout概述 SwipeRefrshLayout是Google官方更新的一个Widget,可以实现下拉刷新的效果.该控件集成自ViewGroup在support-v4兼容包 ...
- Google官方下拉刷新组件---SwipeRefreshLayout
今天在Google+上看到了SwipeRefreshLayout这个名词,遂搜索了下,发现竟然是刚刚google更新sdk新增加的一个widget,于是赶紧抢先体验学习下. SwipeRefreshL ...
- 基于better-scroll封装一个上拉加载下拉刷新组件
1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
- 一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
- vue-上拉加载、下拉刷新组件
vue在移动端开发过程中,上拉加载.下拉刷新是页面的基本需求,现在给大家介绍一种基于touch事件封装的刷新组件. 组件支持传参.传递事件.请求成功异步回调.上拉与触底触发加载或刷新. 父子组件间的通 ...
随机推荐
- 在js中实现邮箱格式的验证
在js中实现邮箱格式的验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><htm ...
- Linux下安装tensorflow
- iOS音频解码表格
- CGAffineTransform
这个是CoreGraphics框架中的CGAffineTransform类,可用于设定UIView的transform属性.控制视图的缩放.旋转和平移操作.另称仿射变换矩阵. Quartz转换实现原理 ...
- 远程ssh登陆时报错:/bin/bash: Permission denied
远程普通用户ssh登录时,提示/bin/bash: Permission denied,用户名mas,密码正确. 首先上个图,用户远程登录步骤,转自http://www.tldp.org/LDP/LG ...
- 魔镜VIP批量条形码视频教程
需要购买者请登我的淘宝店,https://cdrapp.taobao.com/ 优惠价哦!
- java深入技术九 (注解)
java注解 (Annotation) 一般起到说明,配置的作用,在java.lang.annotation 定义,本质上没有增强java的能力 1.常用注解:@Override,强制编译器检查标注的 ...
- mybatis Oracle 批量插入,批量更新
传入的参数只要是list类型的参数就行了..............1.批量插入<insert id="insertBatch" parameterType="ja ...
- yii小细节
1.main.php增加导航栏严格区分大小写,否则会出现404错误 2.增加'分页'功能---前后台的models里面的search.php 添加 public function search($pa ...
- 中间件Study-了解什么是中间件
一.中间件含义:中间价是位于各种平台(硬件和操作系统)和各种应用之间的通用服务. 帮助应用实现高效的.可靠的消息使应用之间实现便捷的互联互通高效.可靠构建企业应用实现分布式应用的快速搭建和部署注:中间 ...