jQuery手机端上拉刷新下拉加载更多页面
基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下:
实现的代码。
html代码:
<div id="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 (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) { document.querySelectorAll("#wrapper ul li")[i].colorfulBg(); } refresher.init({ id: "wrapper",//<------------------------------------------------------------------------------------┐ pullDownAction: Refresh, pullUpAction: Load }); var generatedCount = 0; function Refresh() { setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! var el, li, i; 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 (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) { document.querySelectorAll("#wrapper ul li")[i].colorfulBg(); } }, 1000); } function Load() { setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production! var el, li, i; 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 (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) { document.querySelectorAll("#wrapper ul li")[i].colorfulBg(); } }, 1000); } </script>
jQuery手机端上拉刷新下拉加载更多页面的更多相关文章
- juery下拉刷新,div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
- Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
- Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载
随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...
- jQuery WeUI 组件下拉刷新和滚动加载的实现
最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...
- Flutter学习笔记(25)--ListView实现上拉刷新下拉加载
如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...
- 微信小程序 上拉刷新/下拉加载
小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...
- ListView上拉刷新和分页加载完整的Dome
很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...
随机推荐
- Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..
Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...
- Proxy模式:管理第三方API
软件中的Barrier. 数据从程序移到DB中时,要跨越数据库的Barrier.消息从一个PC到另一个PC时,要跨越网络Barrier. 跨越可能是复杂的,很可能处理Barrier的Code会多于处理 ...
- Leetcode 232 Implement Queue using Stacks STL
本题用两个栈实现队列,用栈的基本操作去实现队列的所有基本操作push(),pop(),peek()以及empty() sa作为输入栈,sb作为输出栈,将sa输入元素的反转过来放到sb中 push与sa ...
- 实测可用的免费STUN服务器!
实测可用的免费STUN服务器! 以实际ping延迟排序: stun.voipbuster.com 287ms stun.wirlab.net 320ms s1.taraba.net ...
- Activiti 部署流程定义及相关的表(classpath部署、zip部署)
package com.mycom.processDefinition; import org.activiti.engine.ProcessEngine; import org.activiti.e ...
- js获取gridview模板列中textbox行列的值
下面一个例子:在gridview中第一列输入数值,第二列输入数值,点击第三列的时候进行计算 求和,如果不符合标记为红色字体. 如图: 代码 : <html xmlns="http:// ...
- 如何在使用MAMP环境下安装MySQLdb
我的电脑上没有安装XAMPP,而是安装了MAMP PRO,其实两者都差不多,都是PHP+MySQL+Apache的集成环境,只是MAMP的GUI界面更华丽一些,但是也更复杂一些. 好了不说这些,说说问 ...
- 【转】Objective-C Class Dump
(转自:http://blog.sina.com.cn/s/blog_4431c7610100x15t.html) class dump是一个命令行工具,用来监测存储在Mach-O二进制文件理的Obj ...
- 让Extjs EditorGridPanel 编辑时支持方向键
在用 extjs editorgridpanel 进行输入编辑的时候, 默认情况下只支持使用 tab 键可以实现焦点切换, 如果想让editorgridpanel 在编辑时通过方向键来实现焦点跳转切换 ...
- CSS - Select 标签在不同浏览器中的高度设置
当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html- ...