具体操作见代码:

<!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. c# 正则验证

    1.验证百分数 bool tempBool = Regex.IsMatch(str, @"[1-9]{0,1}[0-9](\\.[0-9])?%");

  2. python学习之类的反射

    在学习网络编程的时候用到反射,然后发现自己反射这部分的应用不是很熟练,决定返回来重新整理一下 对于类的反射,主要有四个用法,下面都说一下 1.hasattr 判断对象或者类是否存在指定的属性,看代码以 ...

  3. Android开发中,使用 EditText 输入内容,如何进行一键清空内容处理

    本文仅为个人的处理方式,希望能对您有所帮助,欢迎各位留言指正,抱拳了 1.text.xml示例: <?xml version="1.0" encoding="utf ...

  4. Vue-项目打包上线

    一.打包生成dist目录 运行npm run build 进行打包,控制台显示“Build complete”表示打包完成了. npm run build 二.dist目录放到后端跟目录 打包后生成一 ...

  5. UNICODE与ASCII

    1.ASCII的特点 ASCII 是用来表示英文字符的一种编码规范.每个ASCII字符占用1 个字节,因此,ASCII 编码可以表示的最大字符数是255(00H—FFH).这对于英文而言,是没有问题的 ...

  6. 乡下人设计模式——SOLID之六大原则

    S(Single Responsibility Principle):单一责任原则 O(Open Closed Principle):开放封闭原则 L(Liskov Substitution Prin ...

  7. 08-JavaScript中的函数

    JavaScript中的函数 1.函数简介 函数:就是将一些语句进行封装,然后通过调用的形式,执行这些语句. 函数的作用: 将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重 ...

  8. mybatis 使用接口绑定

    使用selectList,selectOne..的缺陷 刚开始学习mybatis的时候,使用selectList或者selectOne,传入要调用的mapper,如果又参数要传递的话,就需要将参数进行 ...

  9. Scanner和BufferReader的效率问题

    先给出一道题,测试平台是Acwing, 这道题是腾讯2019年春招提前批笔试第二题.题目不难,但是如果不注意细节,很容易TLE(超时) https://www.acwing.com/problem/c ...

  10. Java集合:HashMap底层实现和原理(源码解析)

    Note:文章的内容基于JDK1.7进行分析.1.8做的改动文章末尾进行讲解. 一.先来熟悉一下我们常用的HashMap: 1.概述 HashMap基于Map接口实现,元素以键值对的方式存储,并且允许 ...