<body>

mui文档提供了两种不同模式的下拉刷新，具体情况看文档，链接：http://dev.dcloud.net.cn/mui/pulldown/

单 webview 模式和 双 webview 模式用统一的DOM结构

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view">

</ul>
</div>
</div>

<script>

mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
contentrefresh: '正在刷新...',
callback: pulldownRefresh,
style: 'circle',//单webview在安卓手机下,必选的属性
auto:true
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh,
auto:true
}
}
});

/*
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
//模拟数据
for(var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.lastChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;

上拉加载，具体业务实现

function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
//模拟数据
for(var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//上拉加载，新纪录插到最前面；
table.insertBefore(li, table.lastChild);
}

}, 1500);
}

</script>

</body>

mui 下拉刷新和上拉加载的更多相关文章

  1. android--------自定义控件ListView实现下拉刷新和上拉加载

    开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...

  2. Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理

    RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...

  3. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. IOS 开发下拉刷新和上拉加载更多

    IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh ( ...

  5. IOS UITableView下拉刷新和上拉加载功能的实现

    在IOS开发中UITableView是非常常用的一个功能,而在使用UITableView的时候我们经常要用到下拉刷新和上拉加载的功能,今天花时间实现了简单的UITableView的下拉刷新和上拉加载功 ...

  6. Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)

    PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的Vie ...

  7. 使用PullToRefresh实现下拉刷新和上拉加载

    使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRe ...

  8. 下拉刷新和上拉加载 Swift

    转载自:http://iyiming.me/blog/2015/07/05/custom-refresh-and-loading/ 关于下拉刷新和上拉加载,项目中一直使用MJRefresh(原先还用过 ...

  9. H5下拉刷新和上拉加载实现原理浅析

    前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...

  10. 安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载（一分钟搞定，超级简单）

    前言 以前在实现ListView下拉刷新和上拉加载数据的时候都是去继承原生的ListView重写它的一些方法,实现起来非常繁杂,需要我们自己去给ListView定制下拉刷新和上拉加载的布局文件,然后添 ...

随机推荐

  1. Apex的对象共享

    Apex的对象共享 在Apex中,每个对象都有一个"共享"对象,其中存储了该对象的共享设定. 这种共享对象以"share"结尾.比如Account的共享对象是A ...

  2. git下载、安装、连接github

    0.下载git 官网下载速度慢,下载不下来阿里云下载地址:https://npm.taobao.org/mirrors/git-for-windows/ 1.安装git linux:在命令行直接输入: ...

  3. javascript模块化编程-详解立即执行函数表达式IIFE

    一.IIFE解释 全拼Imdiately Invoked Function Expression,立即执行的函数表达式.  像如下的代码所示,就是一个匿名立即执行函数: (function(windo ...

  4. python接口测试—post请求（二）

    使用post请求登陆小极客网. 1.获取登陆接口,及用户名和密码参数 进入小极客网,先注册个账户,修改用户名和密码,然后点击登陆,打开debug调试-进入到network下 输入用户名和密码,点击登陆 ...

  5. owncloud 实现私有云进行多端文件同步

    研究生生涯开始了,事情逐渐多了起来.都没时间写博客了... 开学实验室配了台电脑,我把主机装上了Fedora 作为我的服务器.平时有些实验室的材料,经常几个电脑一起看,使用U盘拷来拷去很是麻烦.今天重 ...

  6. Linux-lvm逻辑卷管理和提示丢失pv物理卷

    问题描述: 有次在使用lvm扩容的时候,整错了,导致显示如下情况 提示缺少一个pv导致无法继续,pvdisplay的时候查看到unknown 使用pvs查看找到pvname的unknown对应群组ce ...

  7. 【PAT】B1038 统计同成绩学生(20)（20 分）

    #include<stdio.h> int arr[102]={0};//分数作为自己的下标,注意 int main(){ int N;scanf("%d",& ...

  8. 记一次ubuntuyu源码安装node.js

    1.官网下载源码 2.下载后解压,在终端打开,并进入文件夹 3../configure 这一步可谓是一波三折,先是没有Python 安装Python 又说没有G++,安装G++后终于成功执行./con ...

  9. python 从外部获取传入的参数

    有时候我们在执行python程序的时需要接收到外部传入的参数 python的 sys.argv[]就能实现 # test.py import sys #引入模块 str = sys.argv[1]pr ...

  10. python3的C3算法

    一.基本概念 1. mro序列 MRO是一个有序列表L,在类被创建时就计算出来. 通用计算公式为: mro(Child(Base1,Base2)) = [ Child ] + merge( mro(B ...