手机页面上拉加载下拉刷新杂么做？ - 博客频道 - CSDN.NET
kakaxiD的博客
分类：个人日记
用dropload.js
&!doctype html&
lang="zh-cn"&
name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8"&
&加载底部&
name="full-screen" content="yes"&
name="x5-fullscreen" content="true"&
margin: 0;
padding:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
font-size:10px;
background-color: #f5f5f5;
font-size: 1.2em;
height: 44px;
line-height: 44px;
border-bottom: 1px solid #ccc;
background-color: #eee;
text-align: center;
font-size: 2rem;
font-weight: normal;
max-width: 640px;
margin: 0 auto;
background-color: #fff;
.content .item{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align:center;
-webkit-box-align:center;
box-align:center;
-webkit-align-items:center;
align-items:center;
padding:3.125%;
border-bottom: 1px solid #ddd;
color: #333;
text-decoration: none;
.content .item {
display: block;
width: 40px;
height: 40px;
border:1px solid #ddd;
.content .item {
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
width: 100%;
max-height: 40px;
overflow: hidden;
line-height: 20px;
margin: 0 10px;
font-size: 1.2rem;
.content .item .date{
display: block;
height: 20px;
line-height: 20px;
color: #999;
-webkit-animation: opacity 0.3s linear;
animation: opacity 0.3s linear;
@-webkit-keyframes opacity {
opacity:0;
opacity:1;
@keyframes opacity {
opacity:0;
opacity:1;
rel="stylesheet" href="../dist/dropload.css"&
class="header"&
&就当我是新闻页吧&
class="content"&
class="lists"&&
src="js/zepto.min.js"&&
src="../dist/dropload.min.js"&&
$(function(){
var page = 0;
var size = 10;
$('.content').dropload({
scrollArea : window,
loadDownFn : function(me){
var result = '';
type: 'GET',
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
dataType: 'json',
success: function(data){
var arrLen = data.
if(arrLen & 0){
for(var i=0; i&arrL i++){
'&a class="item opacity" href="'+data[i].link+'"&'
+'&img src="'+data[i].pic+'" alt=""&'
+'&h3&'+data[i].title+'&/h3&'
+'&span class="date"&'+data[i].date+'&/span&'
me.lock();
me.noData();
setTimeout(function(){
$('.lists').append(result);
me.resetload();
error: function(xhr, type){
alert('Ajax error!');
me.resetload();
排名：千里之外jQuery手机端上拉刷新下拉加载更多页面 - 王朝网络 -
分享&&&&&当前位置: &&&&&&&&jQuery手机端上拉刷新下拉加载更多页面&&&　　基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下：　　在线预览
源码下载　　实现的代码。　　html代码：　　&divid="wrapper"&&ul&&li&row 10&/li&&li&row 9&/li&&li&row 8&/li&&li&row 7&/li&&li&row 6&/li&&li&row 5&/li&&li&row 4&/li&&li&row 3&/li&&li&row 2&/li&&li&row 1&/li&&/ul&&/div&&script&for(vari=0; i&document.querySelectorAll("#wrapper ul li"). i++) {　　
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();　　
refresher.init({　　
id:"wrapper",//&------------------------------------------------------------------------------------┐pullDownAction: Refresh,　　
pullUpAction: Load　　
});vargeneratedCount=0;functionRefresh() {　　
setTimeout(function() {//&-- Simulate network congestion, remove setTimeout fromPRoduction!varel, li,　　
el=document.querySelector("#wrapper ul");　　
el.innerHTML='';for(i=0; i&11; i++) {　　
li=document.createElement('li');　　
li.appendChild(document.createTextNode('async row'+(++generatedCount)));　　
el.insertBefore(li, el.childNodes[0]);　　
wrapper.refresh();/****remember to refresh after
action completed！ ---yourId.refresh(); ----| ****/for(vari=0; i&document.querySelectorAll("#wrapper ul li"). i++) {　　
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();　　
},1000);　　
}functionLoad() {　　
setTimeout(function() {//&-- Simulate network congestion, remove setTimeout from production!varel, li,　　
el=document.querySelector("#wrapper ul");for(i=0; i&2; i++) {　　
li=document.createElement('li');　　
li.appendChild(document.createTextNode('async row'+(++generatedCount)));　　
el.appendChild(li, el.childNodes[0]);　　
wrapper.refresh();/****remember to refresh after action completed！！！
---id.refresh(); --- ****/for(vari=0; i&document.querySelectorAll("#wrapper ul li"). i++) {　　
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();　　
},1000);　　
}&/script&　　via：/article/55236&&&&&今日推荐
&&&&&日版宠物情人2017的插曲，很带节奏感，日语的，女生唱的。
最后听见是在第8集的时候女主手割伤了，然后男主用嘴帮她吸了一下，插曲就出来了。
歌手：Def...老钟家的两个儿子很特别，就是跟其他的人不太一样，魔一般的执着。兄弟俩都到了要结婚的年龄了，不管自家老爹怎么磨破嘴皮子，兄弟俩说不娶就不娶，老父母为兄弟两操碎了心...把牛仔裤磨出有线的破洞
1、具体工具就是磨脚石，下面垫一个硬物，然后用磨脚石一直磨一直磨，到把那块磨薄了，用手撕开就好了。出来的洞啊很自然的。需要猫须的话调几...先来看下敬业福和爱国福
今年春节，支付宝再次推出了“五福红包”活动，表示要“把欠大家的敬业福都还给大家”。
今天该活动正式启动，和去年一样，需要收集“五福”...有时候我们打开冰箱就会闻到一股异味，冰箱里的这种异味是因为一些物质发出的气味的混合体，闻起来让人恶心。 产生这些异味的主要原因有以下几点。
1、很多人有这种习...简介
《极品家丁》讲述了现代白领林晚荣无意回到古代金陵，并追随萧二小姐化名“林三”进入萧府，不料却阴差阳错上演了一出低级家丁拼搏上位的“林三升职记”。...你就是我最爱的宝宝 - 李溪芮
(电视剧《极品家丁》片尾曲)
作词：常馨内
作曲：常馨内
你的眉 又鬼马的挑
你的嘴 又坏坏的笑
上一秒吵闹 下...乌梅，又称春梅，中医认为，乌梅味酸，性温，无毒，具有安心、除热、下气、祛痰、止渴调中、杀虫的功效，治肢体痛、肺痨病。乌梅泡水喝能治伤寒烦热、止吐泻，与干姜一起制...什么是脂肪粒
在我们的脸上总会长一个个像脂肪的小颗粒，弄也弄不掉，而且颜色还是白白的。它既不是粉刺也不是其他的任何痘痘，它就是脂肪粒。
脂肪粒虽然也是由油脂...来源：中国青年报
新的攻击方法不断涌现，黑客几乎永远占据网络攻击的上风，我们不可能通过技术手段杜绝网络攻击。国家安全保障的主要方向是打击犯罪，而不是处置和惩罚...夫妻网络直播“造人”爆红
　　1月9日，温岭城北派出所接到南京警方的协查通告，他们近期打掉了一个涉黄直播APP平台。而根据掌握的线索，其中有一对涉案的夫妻主播...如何防止墙纸老化？
（1）选择透气性好的墙纸
市场上墙纸的材质分无纺布的、木纤维的、PVC的、玻璃纤维基材的、布面的等，相对而言，PVC材质的墙纸最不透气...观点一：破日本销售量的“鲜肌之谜” 非日本生产
近一段时间，淘宝上架了一款名为“鲜肌之谜的” 鲑鱼卵巢美容液，号称是最近日本的一款推出的全新护肤品，产品本身所...系腰裙(北宋词人 张先)
惜霜蟾照夜云天，朦胧影、画勾阑。人情纵似长情月，算一年年。又能得、几番圆。
欲寄西江题叶字，流不到、五亭前。东池始有荷新绿，尚小如...关于女人的经典语句1、【做一个独立的女人】
思想独立：有主见、有自己的人生观、价值观。有上进心,永远不放弃自己的理想，做一份自己喜爱的事业，拥有快乐和成就...你想体验机器人性爱吗？你想和性爱机器人结婚吗？如果你想，机器人有拒绝你的权利吗？
近日，第二届“国际人类-机器人性爱研讨会”大会在伦敦金史密斯大学落下帷幕。而...10.土耳其地下洞穴城市
变态指数：★★☆☆☆
这是土耳其卡帕多西亚的一个著名景点，传说是当年基督教徒们为了躲避战争而在此修建。里面曾住着20000人，......据英国《每日快报》报道，一位科学家兼理论家Robert Lanza博士宣称，世界上并不存在人类死亡，死亡的只是身体。他认为我们的意识借助我们体内的能量生存，而且...《我爱狐狸精》 - 刘馨棋
　　(电视剧《屏里狐》主题曲)
　　作词：金十三&李旦
　　作曲：刘嘉
　　狐狸精 狐狸仙
　　千年修...·&·&·&&&&&&基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下：
实现的代码。
html代码：
&divid="wrapper"&&ul&&li&row 10&/li&&li&row 9&/li&&li&row 8&/li&&li&row 7&/li&&li&row 6&/li&&li&row 5&/li&&li&row 4&/li&&li&row 3&/li&&li&row 2&/li&&li&row 1&/li&&/ul&&/div&&script&for(vari=0; i&document.querySelectorAll("#wrapper ul li"). i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
refresher.init({
id:"wrapper",//&------------------------------------------------------------------------------------┐pullDownAction: Refresh,
pullUpAction: Load
});vargeneratedCount=0;functionRefresh() {
setTimeout(function() {//&-- Simulate network congestion, remove setTimeout fromPRoduction!varel, li,
el=document.querySelector("#wrapper ul");
el.innerHTML='';for(i=0; i&11; i++) {
li=document.createElement('li');
li.appendChild(document.createTextNode('async row'+(++generatedCount)));
el.insertBefore(li, el.childNodes[0]);
wrapper.refresh();/****remember to refresh after
action completed！ ---yourId.refresh(); ----| ****/for(vari=0; i&document.querySelectorAll("#wrapper ul li"). i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}functionLoad() {
setTimeout(function() {//&-- Simulate network congestion, remove setTimeout from production!varel, li,
el=document.querySelector("#wrapper ul");for(i=0; i&2; i++) {
li=document.createElement('li');
li.appendChild(document.createTextNode('async row'+(++generatedCount)));
el.appendChild(li, el.childNodes[0]);
wrapper.refresh();/****remember to refresh after action completed！！！
---id.refresh(); --- ****/for(vari=0; i&document.querySelectorAll("#wrapper ul li"). i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}&/script&
via：/article/55236&&&&&　　免责声明：本文仅代表作者个人观点，与王朝网络无关。王朝网络登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。&&&&&&为你推荐&&&&&&转载本文&UBB代码&HTML代码复制到剪贴板...&更多内容··········&&&&&&&&&频道精选&&&王朝女性&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝分栏&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝编程&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝导购&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&王朝其他&&|&&|&&|&&|&&|&&|&&&&2005-&&版权所有&中国领先的IT技术网站
51CTO旗下网站
js 模拟手机页面文件的下拉刷新
js 模拟手机页面文件的下拉刷新初探
作者：imwtr来源：博客园| 09:36
老总说需要这个功能，好吧那就看看相关的东西呗
最后弄出了一个简单的下拉刷新页面的形式，还不算太复杂
要在仿真器下才能看到效果，比如chrome的里边（或者用手机浏览器查看，但测试发现有些浏览器有问题，目前手机猎豹是没问题的）
主要就是：
下拉--&提示松开刷新--&松开后--&开始刷新--&刷新成功后还原
html,css部分
style&type=&text/css&&&&&&&#slideDown{margin-top:&0;width:&100%;}&&&&&&&&&&#slideDown1,#slideDown2{width:&100%;height:&70;background:&#e9f4f7;display:&}&&&&&&&&&&#slideDown1{height:&20}&&&&&&&&&&#slideDown1&p,#slideDown2&p{margin:&20px&text-align:font-size:&14color:&#37bbf5;}&&/style&&&&&&&&&div&id=&content&&&&&&&&&&&&div&id=&slideDown&&&&&&&&&&&&&&&&div&id=&slideDown1&&&&&&&&&&&&&&&&&&&&p&松开刷新&/p&&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&&div&id=&slideDown2&&&&&&&&&&&&&&&&&&&&p&正在刷新&...&/p&&&&&&&&&&&&&&&/div&&&&&&&&&&&/div&&&&&&&&&&&div&class=&myContent&&&&&&&&&&&&&&&&ul&&&&&&&&&&&&&&&&&&&li&item1&--&item1&--&item1&/li&&&&&&&&&&&&&&&&&&&li&item2&--&item2&--&item2&/li&&&&&&&&&&&&&&&&&&&li&item3&--&item3&--&item3&/li&&&&&&&&&&&&&&&&&&&li&item4&--&item4&--&item4&/li&&&&&&&&&&&&&&&&&&&li&item5&--&item5&--&item5&/li&&&&&&&&&&&&&&&&&&&li&item6&--&item6&--&item6&/li&&&&&&&&&&&&&&&&&&&li&item7&--&item7&--&item7&/li&&&&&&&&&&&&&&&/ul&&&&&&&&&&&/div&&&&&&&/div&&
为一个节点绑定事件，可以是整个body，按照实际来看
k_touch()函数是主要代码，目前主要涉及三个事件，touchstart
这里获取touch点坐标是用pageX,pageY 当然不兼容的话先不考虑
因为是下滑才刷新，所以稍微控制一下way，其实也就是通过这个控制是获取pageX 还是pageY
滑一滑可以直接看到dist的变化，其实就把它看做px了吧
更多的功能，以后再说吧..
&script&type=&text/javascript&&&&&&&&&&&&function&slideDownStep1(dist){&&&&&&&&&&&var&slideDown1&=&document.getElementById(&slideDown1&),&&&&&&&&&&&&&slideDown2&=&document.getElementById(&slideDown2&);&&&&&&&&&slideDown2.style.display&=&&none&;&&&&&&&&&slideDown1.style.display&=&&block&;&&&&&&&&&slideDown1.style.height&=&(parseInt(&20px&)&-&dist)&+&&px&;&&&&&}&&&&&&&&&&function&slideDownStep2(){&&&&&&&&&&var&slideDown1&=&document.getElementById(&slideDown1&),&&&&&&&&&&&&&slideDown2&=&document.getElementById(&slideDown2&);&&&&&&&&&slideDown1.style.display&=&&none&;&&&&&&&&&slideDown1.style.height&=&&20px&;&&&&&&&&&slideDown2.style.display&=&&block&;&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&function&slideDownStep3(){&&&&&&&&&&var&slideDown1&=&document.getElementById(&slideDown1&),&&&&&&&&&&&&&slideDown2&=&document.getElementById(&slideDown2&);&&&&&&&&&slideDown1.style.display&=&&none&;&&&&&&&&&slideDown2.style.display&=&&none&;&&&&&}&&&&&&&&&&&k_touch(&content&,&y&);&&&&&&&&&&function&k_touch(contentId,way){&&&&&&&&&&var&_start&=&0,&&&&&&&&&&&&&_end&=&0,&&&&&&&&&&&&&_content&=&document.getElementById(contentId);&&&&&&&&&_content.addEventListener(&touchstart&,touchStart,false);&&&&&&&&&_content.addEventListener(&touchmove&,touchMove,false);&&&&&&&&&_content.addEventListener(&touchend&,touchEnd,false);&&&&&&&&&function&touchStart(event){&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&touch&=&event.targetTouches[0];&&&&&&&&&&&&&if(way&==&&x&){&&&&&&&&&&&&&&&&&&_start&=&touch.pageX;&&&&&&&&&&&&&}else{&&&&&&&&&&&&&&&&&&_start&=&touch.pageY;&&&&&&&&&&&&&}&&&&&&&&&}&&&&&&&&&function&touchMove(event){&&&&&&&&&&&&&&var&touch&=&event.targetTouches[0];&&&&&&&&&&&&&if(way&==&&x&){&&&&&&&&&&&&&&&&&&_end&=&(_start&-&touch.pageX);&&&&&&&&&&&&&}else{&&&&&&&&&&&&&&&&&&_end&=&(_start&-&touch.pageY);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&if(_end&&&0){&&&&&&&&&&&&&&&&&&&&&slideDownStep1(_end);&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&}&&&&&&&&&&}&&&&&&&&&function&touchEnd(event){&&&&&&&&&&&&&&if(_end&&0){&&&&&&&&&&&&&&&&&&console.log(&左滑或上滑&&&+_end);&&&&&&&&&&&&&}else{&&&&&&&&&&&&&&&&&&console.log(&右滑或下滑&+_end);&&&&&&&&&&&&&&&&&slideDownStep2();&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&setTimeout(function(){&&&&&&&&&&&&&&&&&&&&&&slideDownStep3();&&&&&&&&&&&&&&&&&},2500);&&&&&&&&&&&&&}&&&&&&&&&}&&&&&}&&&&&&/script&&
小尾巴一摆就是一个季节！
【编辑推荐】【责任编辑： TEL：（010）】
大家都在看猜你喜欢
头条外电头条外电头条
24H热文一周话题本月最赞
讲师：1人学习过
讲师：26人学习过
讲师：0人学习过
精选博文论坛热帖下载排行
Visual C++ 6.0是Microsoft公司的Visual Studio开发组件中最强大的编程工具，利用它可以开发出高性能的应用程序。本书由浅入深，从基础到实...
订阅51CTO邮刊/*去掉iphone手机滑动默认行为*/
$('body').on('touchmove', function (event) {
event.preventDefault();
阅读(...) 评论()