<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. SoapUI 访问代理设置

    SoapUI 访问代理设置 by:授客 QQ:1033553122 问题描述: 运行SoapUI时,发现接口访问不通,如下图,提示"Connection to http://127.0.0. ...

  2. memcached分析

    memcache介绍 memcache是一个高性能的分布式的内存对象缓存系统,用于动态Web应用以减轻数据库负担.它通过在内存中缓存数据和对象,来减少读取数据库的次数.从而提高动态.数据库驱动网站速度 ...

  3. NB-IOT模块 M5310-A接入百度开放云IOT Hub MQTT

    目录 1.登陆百度开放云,在产品服务中选择IOT HUB 2 2.选择 创建计费套餐,目前1百万条/每月是免费的 2 3.点击管理控制台进入项目列表 4 4. 点击创建项目,项目类型选择数据型 4 5 ...

  4. 高通移植mipi LCD的过程LK代码

    lk部分:(实现LCD兼容) 1. 函数定位 aboot_init()来到target_display_init(): 这就是高通原生lk LCD 兼容的关键所在.至于你需要兼容多少LCD 就在whi ...

  5. ccf--20140303--命令行选项

    本题是常规思路,这里要注意:1)带参命令没有参数和参数错误时终止2)命令不存在时终止3)命令都是错误的,不以—开头. 题目和代码如下: 问题描述 试题编号: 201403-3 试题名称: 命令行选项 ...

  6. IntelliJ IDEA 2017 激活

    http://idea.lanyus.com/ 直接获取注册码 或者复制,在license server中添加: http://intellij.mandroid.cn/ http://idea.im ...

  7. Web服务器的反向代理nginx

    nginx作为web服务器一个重要的功能就是反向代理. Nginx配置详解   序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭 ...

  8. HDU - 4336 （容斥）

    题意:给你n个奖,每个机会只能中一个奖,中奖的概率分别是{p1,p2,p3......pn}:并且这些奖是两两没有交集.(pi*pj=0)问,需要多少次才能把所有奖都中完的期望值. 先来分析:中所有奖 ...

  9. php结合redis高并发下，悲观锁解决数据二次写入

    悲观锁 在悲观锁的情况下,为了保证事务的隔离性,就须要一致性锁定读.读取数据时给加锁,其他事务无法改动这些数据.改动删除数据时也要加锁,其他事务无法读取这些数据. 在做数据缓存的时候,通常都是把数据从 ...

  10. 对Promise的理解？

    ES6原生提供了promise对象 所谓Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通过是一个异步操作),并且这个事件提供统一的API,可供进一步处理 P ...