mui 上拉加载 实现分页加载功能
mui 上拉加载 实现分页加载功能,效果图:
分页功能(上拉加载):
1、引入需要的css、js文件
<link href="static/css/mui.css" rel="stylesheet" />
<!-- js -->
<script src="static/js/jquery-3.2.0.js"></script>
<script src="static/js/mui.min.js"></script>
2、dom结构
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="order_list">
</div>
</div>
</div>
3、动态获取数据,实现上拉加载<script>
(function(){
var lastPage; //总共页数
var currPage=1; //当前页码
var counter=1; //计数器 function getList(){
var result="";
$.ajax({
url:'http://www.aaa.com/api/test/refreshPage?page='+counter, //api
type:'get',
dataType:"json",
timeout:10000,
data:{},
error:function(data){
console.log("error")
},
success:function(res){
lastPage = res.data.last_page;
currPage = res.data.current_page;
var data = res.data.data; $.each(data,function(i,value){
result += '<div class="order_item">'
+'<div class="order_title">'
+'<div class="order_number">订单编号:'+value.order_no+'</div>'
+'<div class="order_date">'+value.created_at+'</div>'
+'</div>'
+'<div class="order_msg">'
+'<div class="order_img">'
+'<img src="'+upload_path+value.image_url+'" />'
+'</div>'
+'<div class="order_info">'
+'<p class="info_txt info_title">'+value.goods_name+'</p>'
+'<p class="info_txt">'+value.machine_name+'('+value.machine_no+')</p>'
+'<p class="info_txt">订单状态:<span class="success_status">'+value.order_status+'</span></p>'
+'</div>'
+'<div class="order_price">'+value.amount+'元</div>'
+'</div>'
+'</div>';
jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
},
})
} //上拉加载
mui.init({
pullRefresh : {
container:'#pullrefresh',//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:true,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback :pullupRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
}); function pullupRefresh(){
setTimeout(function(){
getList();
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++counter>lastPage));
},1500)
}
})(); </script>
注意:
mui中的pullupRefresh会阻止onclick触发事件及a标签链接,可以通过下面方式进行触发事件及跳转:
如:
result += '<div class="item_wrap clearfix" data-url="http://www.baidu.com" id='+value.id+' >'
+ '<div class="id_wrap" >'+value.id+'</div>'
+ '<div class="cont_wrap" >'
+ '<div class="order_no_wrap" >'+value.order_no+'</div>'
+ '<div class="data_wrap" >'+value.created_at+'</div>'
+ '</div>'
+ '</div>';
$(function() {
//mui触屏点击
$("#pullrefresh").on('tap', '.item_wrap', function(event) {
var url = $(this).attr("data-url");
location.href = url;
});
})
mui 上拉加载 实现分页加载功能的更多相关文章
- mui 上拉加载更多的使用
最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑 ...
- MUI - 上拉加载不执行
mui('#pullrefresh').pullRefresh().refresh(true); if($(".list-item").length == countDataSum ...
- MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
- mui上拉加载
最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui ...
- jquery 和 mui 上拉加载
jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...
- mui上拉刷新+下拉加载
具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- mui 上拉加载更多
看起来很简单的东西,实践过程中还是出现了很多麻烦,比如上拉时,状态条跑到了顶部,因为内容没有添加到容器中,再比如下拉的回调函数使用问题,this的传递. html实现部分: <div class ...
- mui 上拉加载
最近做到移动端页面的开发,需要mui 的上拉刷新功能,最后实现后整理代码如下: 1.需要引入的js <link href="../resource/css/mui.min.css&qu ...
- mui上拉刷新
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- Python 刷题知识点
if : elif : else : print('{0} \n{1} \n{2}' .format((a + b), (a - b), (a * b))) print(*[num**2 for nu ...
- Interview - 面试题汇总目录
参考 java 入门面试题 https://blog.csdn.net/meism5/article/details/89021536 一.Java 基础 1.JDK 和 JRE 有什么区别? 2.= ...
- Apache 环境变量配置
在path 中加入 C:\__S_D_K__\AndroidApache\apache-ant-1.9.14\bin 我的路径在C盘
- ElasticSearch再学习
ElasticSearch参数详解 本次使用的windows的版本,如若Linux移步:https://www.cnblogs.com/msi-chen/p/10335794.html 配置文件参数 ...
- 模拟+算贡献——cf1195D
比赛的时候没看到模数,用java大数在写,最后看到的时候已经慌了.. 把贡献算清楚就可以 下面是贡献的推导 有五位数 abcde * 10个 有两位数 fg * 3 个 那么这两种数组成的情况就是 a ...
- DELPHI 让子窗体显示在任务栏上
重载 CreateParams 方法即可 声明: procedure CreateParams(var Params: TCreateParams);override; procedure TForm ...
- Core Text 入门
本文所涉及的代码你可以在这里下载到 https://github.com/kejinlu/CTTest,包含两个项目,一个Mac的NSTextView的测试项目,一个iOS的Core Text的测试项 ...
- 数学相关比较 牛顿迭代法求开方 很多个n的平方分之一
牛顿迭代法求开方 牛顿迭代法 作用: 求f(x) = 0 的解 方法:假设任意一点 x0, 求切线与x轴交点坐标x1, 再求切线与x轴交点坐标x2,一直重复,直到f(xn) 与0的差距在一个极小的范围 ...
- Day 12 :迭代器与生成器
可迭代:在Python中如果一个对象有__iter__( )方法,则称这个对象是可迭代的(Iterable): 其中__iter__( )方法的作用是让对象可以用for ... in循环遍历,列表Li ...
- sql2000行转列 转过来的测试完也不知那个网站去哪了 没法写出处了
ALTER procedure dbo.CommonRowToCol ) as begin --必须包含colname列和result列(不区分大小写), --除colname列和result列 其余 ...