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. groupby linq的实现(1)-----linq框架选型 java .net php
atitit. groupby linq的实现(1)-----linq框架选型 java .net php 实现方式有如下 1. Dsl/ Java8 Streams AP ,对象化的查询api , ...
- ServiceStack 概念
目录 ServiceStack 概念 ServiceStack Web Service 创建与调用简单示列 ServiceStack ServiceStack是.Net和Mono的开源框架,相对WCF ...
- Easyui-datagrid groupview分组后勾选问题
上面datagrid对应的代码如下: $('#tbCheckOut').datagrid({ title: '待分配库位', iconCls: 'icon-search', width: 1112, ...
- 更改Windows系统的密码之后,SQL Server 2008服务无法启动
问题:更改Windows操作系统的密码之后,SQL Server 2008服务无法启动. 原因:SQL Server服务需要使用操作系统的某个登录账户. 解决:需要在服务的属性窗口中修改账户密码,然后 ...
- [ShareSDK for Android]新浪微博常见问题
一.新浪sso授权报错sso package or sign error 1. 新浪微博开放平台应用没有审核通过,不能用sso登陆,否则报错.关闭sso登陆Platform platform = Sh ...
- JVM中的垃圾收集算法和Heap分区简记
如何判断垃圾对象? 垃圾收集的第一步就是先需要算法来标记哪些是垃圾,然后再对垃圾进行处理. 引用计数(ReferenceCounting)算法 这种方法比较简单直观,FlashPlayer/Pyt ...
- 转:主流数据恢复软件——EasyRecovery/Ashampoo Undeleter/Wise Data Recovery/Recuva/Undelete 360
转自:Baidu 空间 2012-10-05 13:57 主流数据恢复软件——EasyRecovery/Ashampoo Undeleter/Wise Data Recovery/Recuva/Und ...
- Ceph monitor故障恢复探讨
1 问题 一般来说,在实际运行中,ceph monitor的个数是2n+1(n>=0)个,在线上至少3个,只要正常的节点数>=n+1,ceph的paxos算法能保证系统的正常运行.所以,对 ...
- ZooKeeper快速搭建
原文地址:http://nileader.blog.51cto.com/1381108/795230 下载PDF版本 本文是ZooKeeper的快速搭建,旨在帮助大家以最快的速度完成一个ZK集群的搭建 ...
- oreData的学习记录
1.如果想创建一个带有coreData的程序,要在项目初始化的时候勾选中 2.创建完成之后,会发现在AppDelegate里多出了几个属性,和2个方法 <span style="fon ...