<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. 关于BI商业智能的“8大问”｜一文读懂大数据BI

    这里不再阐述商业智能的概念了,关于BI,就从过往的了解,搜索以及知乎的一些问答,大家困惑的点主要集中于大数据与BI的关系,BI的一些技术问题,以及BI行业和个人职业前景的发展.这里归纳成8个问题点,每 ...

  2. 记录C/C++中遇到的一些小问题

    1. printf 比如 char a = \x90; printf("%02x", a); 想输出为90,没想到却是ffffff90,这个问题害我一个程序老是出错 最终发现只要改 ...

  3. python第二十九天-----继续学习第三模块——前几天旅行去了

    subprocess模块 import subprocess subprocess.getstatusoutput('dir')#接收字符串格式命令,返回元组形式,第1个元素是执行状态,第2个是命令结 ...

  4. 减少MySQL主从延迟的神器--并行复制大揭密

    1. 简介 MySQL 5.6引入了基于schema的并行复制,即如果binlog events操作的是不同schema的对象,不是DDL,且操作的对象没有对其他schema的foreign key关 ...

  5. Django框架的使用教程--mysql数据库[三]

    Django的数据库 1.在Django_test下的view.py里面model定义模型 from django.db import models # Create your models here ...

  6. Java中一个线程只有六个状态。至于阻塞、可运行、挂起状态都是人们为了便于理解，自己加上去的。

    java中,线程的状态使用一个枚举类型来描述的.这个枚举一共有6个值: NEW(新建).RUNNABLE(运行).BLOCKED(锁池).TIMED_WAITING(定时等待).WAITING(等待) ...

  7. 扑克牌游戏-华为OJ-C++实现

    /*扑克牌游戏大家应该都比較熟悉了.一副牌由54张组成,含3~A.2各4张,小王1张.大王1张.牌面从小到大用例如以下字符和字符串表示(当中.小写joker表示小王,大写JOKER表示大王): 3 4 ...

  8. sphinx笔记

    sphinx笔记 下载中文版coreseek包 1:解压后,将etc下的mysql.conf文件复制一份放到上级目录下,改名为sphinx.conf 2:配置文件: 2.1:source配置数据源 s ...

  9. ethereum/EIPs-1

    https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1.md 介绍了什么是EIP等等的详细信息: eip title status type a ...

  10. nginx的server块如何支持php

    直接贴代码,备份用 server { listen ; server_name abc.com; index index.html index.htm index.php; root /var/www ...