分享一个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事件封装的刷新组件. 组件支持传参.传递事件.请求成功异步回调.上拉与触底触发加载或刷新. 父子组件间的通 ...
随机推荐
- Python 登录系统
---------------------------------------------------------------------------------------- 该程序主要实现了以下3 ...
- OC与c混编实现Java的String的hashcode()函数
首先,我不愿意大家需要用到这篇文章里的代码,因为基本上你就是被坑了. 起因:我被Java后台人员坑了一把,他们要对请求的参数增加一个额外的字段,字段的用途是来校验其余的参数是否再传递过程中被篡改或因为 ...
- web自动化工具-开篇
web自动化工具-开篇 最近几年,前端技术风一样的速度迭代更新,各种框架工具雨后春笋般涌现,作为一个平凡的开发者,也只能在洪流中沉沉浮浮,微不足道,以前前端叫做切图仔.美工,如今改了称号叫前端工程师, ...
- Bootstrap 中的 Typeahead 组件 -- AutoComplete
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
- java性能调优及问题追踪--Btrace的使用
在生产环境中经常遇到格式各样的问题,如OOM或者莫名其妙的进程死掉.一般情况下是通过修改程序,添加打印日志:然后重新发布程序来完成.然而,这不仅麻烦,而且带来很多不可控的因素.有没有一种方式,在不修改 ...
- Windows Server 2012 在桌面上显示”我的电脑”图标
1.本地方式如果是在Windows Server 2012本地控制台下,直接按Win(键盘上的微软徽标键)+R,输入: rundll32.exe shell32.dll,Control_RunDLL ...
- Swift 定义函数 参数 返回值
定义多参数函数 - 用func声明函数 func name(parameters) -> return type { function body } func halfOpenRangeLen ...
- 数据库sql语句规则
sql练习: 创建一个名称为mydb1的数据库. create database mydb1; 查看库 show databases; 创建一个使用utf-8字符集的mydb2数据库. create ...
- 【svn】SSL error: A TLS warning alert has been received的解决方法
第一次用svn(>_<),结果在运行下面语句时,svn很不友好的报错了..... svn co http:10.11.12.13/test1/test2 . 报错信息: svn: OPTI ...
- 查看机器上安装的jdk能支持多大内存
命令:java -Xmx1024m -version C:\Users\maite>java -Xmx1024m -version java version "1.8.0_31&quo ...