<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相关接口 Apex中提供了一组接口用来实现数据的处理.我们主要使用以 ...

  2. Kotlin入门(3)基本变量类型的用法

    上一篇文章介绍了Kotlin在App开发中的简单用法,包括操纵控件对象.设置控件监听器,以及弹出Toast提示等等.也许大家已经迫不及待想要了解更深入的App开发,可是由于Kotlin是一门全新的语言 ...

  3. JsonParseException：非法的unquoted字符（（CTRL-CHAR，代码9））：必须被转义

     其它异常,Could not read document: Illegal unquoted character ((CTRL-CHAR, code 10)): has to be escaped  ...

  4. Java:【面向对象：抽象类，接口】

    本文内容: 抽象类 接口 抽象类与接口的异同 首发日期:2018-03-24 抽象类: 虽然已经有了父类,但有时候父类也是无法直接描述某些共有属性的,比如哺乳类和人类都会叫,而一般来说哺乳类这个父类并 ...

  5. 【redis专题(5)】命令语法介绍之sets

    标签(空格分隔): Redis 关于 redis的无序集合有三个特点: 无序性, 确定性(描述准确) , 唯一性: 有点类似于数据容器: 增 SADD key member1 [member2] 作用 ...

  6. [20170623]利用传输表空间恢复数据库2.txt

    [20170623]利用传输表空间恢复数据库2.txt --//继续上午的测试,测试truncate,是否可行,理论讲应该没有问题.我主要的目的测试是否要切换日志.--//参考链接 : http:// ...

  7. Excel表格规范

    数据处理: 在数据进行分析使用时,需要去除原始数据中的脏数据,让统计数据均为有效数据: 统一表格的格式:去除空格.强制换行符 CLEAN()函数:是去除单元格中的特殊字符: TRIM()函数:去除单元 ...

  8. .net 调用R语言的函数（计算统计值pvalue 对应excel :ttest）

    Pvalue 计算 项目设计pvalue计算,但是由于.net 没有类似的公式或者函数,最终决定使用.net 调用R语言 采用.net 调用r语言的公用函数 需要安装 r语言环境 https://mi ...

  9. Django框架的使用教程--Cookie-Session[五]

    Cookie cookie是存储在浏览器中的一段文本信息,下次同一网站请求,就会发送该cookie给服务器,一般的浏览器都有启动cookie,用cookie存储信息,最好不要存储密码,cookie也有 ...

  10. SQL2008 一直error40 无法连接到localhost

    1. Problem 2. Reason 可能是之前卸载SQL Server时没卸载干净 后来又重新安装时导致默认实例名不能用 就随手写了个SQLMOLORY实例名 但其实系统内这时是有两个SQL实例 ...