具体操作见代码:

<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head> <body>
<div class="mui-scroll-wrapper mui-content">
<div class="mui-scroll">
<ul class="mui-table-view" id="list">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item
</a>
</li>
</ul>
</div>
</div> <script src="js/mui.min.js"></script>
<script type="text/javascript">
// var num=1
// mui.init({
// pullRefresh:{
// container:'mui-content',
// up:{
// auto:true,
// contentrefresh:'请稍后...',
// contentnomore:'没有数据了',
// callback:function(){
//// var list=document.getElementById("list");
//// for(var i=0;i>10;i++){
//// var li=document.createElement("li");
//// li.className='mui-table-view-cell';
//// list.appendChild(li);
//// num++
//// };
// setTimeout(function(){
// this.endPullToRefresh(true);
// }.bind(this),500)
// },
// }
// }
// });
//
// var num=
mui.init({
pullRefresh:{
container:".mui-content",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等 //1.下拉刷新函数 down:{
style:'circle',//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
color:'red', //可选,默认“#2BD009” 下拉刷新控件颜色
// height:'50px',//可选,默认50px.下拉刷新控件的高度,
// range:'100px', //可选 默认100px,控件可下拉拖拽的范围
// offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: true,//可选,默认false.首次加载自动上拉刷新一次
//双webView多加下面三行,且mui('.mui-content').pullRefresh().endPulldownToRefresh();
//单webView:不加下面三行,且mui('.mui-content').pullRefresh().endPulldown();
contentdown:'下拉就可以刷新了',
contentover:'松开我就停止了',
contentrefresh:'正在加载...',
// callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
callback:function(){ var list=document.getElementById('list') for(var i=;i<=;i++){
var li=document.createElement('li');
li.className='mui-table-view-cell';
li.innerHTML='Item'+num; list.appendChild(li);
num++;
}
setTimeout(function(){
//设置在一定时间内隐藏刷新图标
mui('.mui-content').pullRefresh().endPulldownToRefresh();
},);
}
}, //2.下拉加载函数 up:{
style:'circle',//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
color:'red', //可选,默认“#2BD009” 下拉刷新控件颜色
// height:'50px',//可选,默认50px.下拉刷新控件的高度,
// range:'100px', //可选 默认100px,控件可下拉拖拽的范围
// offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: true,//可选,默认false.首次加载自动上拉刷新一次
contentrefresh:'请稍后。。。',
contentnomore:'没有数据了',
// callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
callback:function(){ var list=document.getElementById('list') for(var i=;i<=;i++){
var li=document.createElement('li');
li.className='mui-table-view-cell';
li.innerHTML='Item'+num; list.appendChild(li);
num++;
}
//当num>15时停止下拉更新
setTimeout(function(){
if(num>=){
this.endPullupToRefresh(true);
}else{
this.endPullupToRefresh(false);
}
}.bind(this),);
}
} }
});
</script>
</body> </html>

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

  1. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  2. Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

  3. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  4. 微信小程序 上拉刷新/下拉加载

    小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...

  5. ListView上拉刷新和分页加载完整的Dome

    很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...

  6. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  7. 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...

  8. XRecyclerView上拉刷新下拉加载

    效果图: 首先要添加依赖: //xrecyclerviewimplementation 'com.jcodecraeer:xrecyclerview:1.3.2'//Gsonimplementatio ...

  9. iOS:延迟加载和上拉刷新/下拉加载的实现

    lazy懒加载(延迟加载)UITableView 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要 ...

  10. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

随机推荐

  1. 大数据处理框架之Strom:Flume+Kafka+Storm整合

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 storm-0.9 apache-flume-1.6.0 ...

  2. springboot2+freemarker简单使用

    一.src/main/resources/templates下新建welcome.ftl <!DOCTYPE html> <html lang="en"> ...

  3. centos7 python环境安装

    https://blog.csdn.net/LeonTom/article/details/81289326

  4. Filebeat命令参考

     Filebeat命令参考: Filebeat提供了一个命令行界面,用于启动Filebeat并执行常见任务,例如测试配置文件和加载仪表板.命令行还支持用于控制全局行为的全局标志. 命令: export ...

  5. gulp 自动ftp至服务器时,处理开发 测试服务器地址问题

    var gulp=require('gulp'), babel = require('gulp-babel'), gulpSequence = require('gulp-sequence'), ht ...

  6. FAST MONTE CARLO ALGORITHMS FOR MATRICES II (快速的矩阵分解策略)

    目录 问题 算法 LINEARTIMESVD 算法 CONSTANTTIMESVD 算法 理论 算法1的理论 算法2 的理论 代码 Drineas P, Kannan R, Mahoney M W, ...

  7. [转帖]ORA-03113解决方法

    ORA-03113解决方法 https://www.cnblogs.com/xwdreamer/p/3910264.html 同事遇到过很多次 之前懒的处理 这次看到这个blog 下次遇到了 处理一下 ...

  8. yum 安装fuser命令

    yum install -y psmisc 转自:https://www.cnblogs.com/saneri/p/5465718.html 有时候我们需要umount某个挂载目录时会遇到如下问题: ...

  9. SpringBoot项目优化和Jvm调优(转)

    原文:https://blog.csdn.net/wd2014610/article/details/82182617 项目调优作为一名工程师,项目调优这事,是必须得熟练掌握的事情. 在SpringB ...

  10. ckeditor,关于数据回显