分享一个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事件封装的刷新组件. 组件支持传参.传递事件.请求成功异步回调.上拉与触底触发加载或刷新. 父子组件间的通 ...
随机推荐
- windows安装rabbitmq
官网下载windows安装版本:http://www.rabbitmq.com/install-windows.html ,安装文件rabbitmq-server-3.6.5.exe 前提:安装erl ...
- markdown语法与使用
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 语法 # 文本 =>h1标签 ##文本 =>h2标签 *文本* =&g ...
- Sicily 1150: 简单魔板(BFS)
此题可以使用BFS进行解答,使用8位的十进制数来储存魔板的状态,用BFS进行搜索即可 #include <bits/stdc++.h> using namespace std; int o ...
- 跟着百度学PHP[6]超级全局变量
超级全局变量在PHP 4.1.0之后被启用, 是PHP系统中自带的变量,在一个脚本的全部作用域中都可用. 参考文献:http://www.runoob.com/php/php-superglobals ...
- Android Studio 导出jar包
不像在Eclipse,可以直接导出jar包.AndroidStudio只可以生成aar包. 在网上看到许多朋友问怎么可以像Eclipse一样导出jar包,其实我们只要知道它的原理就可以了. 用jar命 ...
- linQ学习笔记之一
linq解决的问题 1.编程语言中的数据类型与数据库中的数据类型形成的两套体系 2.SQL编码体验落后 3.SQL和XML都有各自的查询语言,而对象没有自己的查询语言 linq简单的集合查询和fore ...
- js数组中sort排序注意的地方
var a=[1,2,3,4,5] function sum(a,b) { return a-b } //从小到大 function obj(a,b) { return b-a } //从大到小 a. ...
- linux git实现代理
说明 Git 目前支持的三种协议 git://.ssh:// 和 http://,使用git:// 和 http://比较多,ssh://忽略,FQ后可以直接加快同步google和github代码. ...
- rpcbind服务说明及关闭
rpcbind服务说明及关闭 Posted by 破冰 on -- : Tuesday rpcbind服务停止命令 service portmap stop redhat 的rpc.statd服务: ...
- OpenGL中坐标系的理解(一)
在OpenGL中,存在着至少存在着三种矩阵,对应着函数glMatrixMode()的三个参数:GL_MODELVIEW,GL_PROJECTION,GL_TEXTURE. 以下主要描述GL_MODEL ...