<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. Nginx入门到精通

    目录 入门篇 1.Nginx的介绍 2.Nginx的安装 3.Nginx的深入剖析 4.Nginx的虚拟主机 5.Nginx的常用功能 6.Nginx的日志剖析 7.Nginx的location剖析 ...

  2. [20170705]理解linux su命令.txt

    [20170705]理解linux su命令.txt --//我一般在维护时经常使用root用户登录,然后su - oracle 转到其他用户操作--//一般都加入 - 参数.这个已经成了条件反射.. ...

  3. 04-openldap客户端安装

    阅读视图 基础环境准备 关闭sssd及安装nslcd客户端 配置nslcd客户端 启动nslcd进程 客户端验证 ssh登录自动创建家目录 1. 基础环境准备 本文承接openldap服务端安装配置, ...

  4. shell脚本之颜色效果显示以及PS1颜色实战

    在bash shell脚本中我们可以使用ASCII颜色来显示文本信息. 格式:\033\[31m hello \033[0m ##m: 左侧#:这个#可以是3或者4,作用不一样. 3:前景色 4:背景 ...

  5. Centos7.5调试/etc/sysctl.conf文件导致宕机

    今天安装greenplus数据库,需要调试一个核心文件/etc/sysctl.conf文件,结果导致系统异常宕机,出现的问题就是使用任何命令都不能输出正确的结果,只有这个显示: 不知道是什么原因,ls ...

  6. 16LaTeX学习系列之---LaTeX数学公式的补充

    目录 目录 前言 (一)知识点说明 1.基础细节 2.gather环境 3.align环境 4.split环境 5.cases环境 (二)实例 1.源代码 2.输出效果 目录 本系列是有关LaTeX的 ...

  7. Linux 小知识翻译 - 「Linux的吉祥物企鹅叫什么名字？」

    这次说说Linux的吉祥物 *企鹅* 都知道Linux的吉祥物是企鹅,但是这个企鹅叫什么名字呢? 它的名字就是「Tux」,注意可不是「Tax」(税收). 具体参考 wiki:中文解释  英文的解释更为 ...

  8. MATLAB用二分法、不动点迭代法及Newton迭代（切线）法求非线性方程的根

    MATLAB用二分法.不动点迭代法及Newton迭代(切线)法求非线性方程的根 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 一.实验原理 二.实验步骤 ...

  9. C - Reduced ID Numbers 寒假训练

    T. Chur teaches various groups of students at university U. Every U-student has a unique Student Ide ...

  10. nginx与location语法详解

    Location语法优先级排列 匹配符 匹配规则 优先级 = 精确匹配 ^~ 以某个字符串开头 ~ 区分大小写的正则匹配 ~* 不区分大小写的正则匹配 !~ 区分大小写不匹配的正则 !~* 不区分大小 ...