mui上拉加载功能实例详解


Posted in Javascript onApril 13, 2017

最近在做移动端的项目,用到了mui的上拉加载,整理如下:

1、需要引入的css、js

<link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" >
<script src="js/jquery-3.2.0.min.js"></script>
<script src="common/mui/js/mui.min.js"></script>

2、静态页的dom结构

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" class="maincon">
<div class="mui-scroll">
<div class="mui-table-view mui-table-view-chevron">
</div>
</div>
</div>

3、静态页面 js对应的代码

<script type="text/javascript">
(function(){
//上拉加载下拉刷新
mui.init({
pullRefresh: {

container: '#pullrefresh',

up: {


contentrefresh: '正在加载...',


callback: pullupRefresh


}

}
});
//加载更多
var dataNum=12;//获取数据总数
var pageSize=3;//每页显示条数
var counter=1;//计数器
var pageStart=0;//开始数据条数
getData(pageStart,pageSize);
function getData(pageStart,pageSize){
//显示数不足每页显示条数
if(dataNum-pageStart<pageSize){
pageSize=dataNum-pageStart;
data(pageStart,pageSize);
console.log("显示数不足每页显示条数");
}
//显示隐藏加载更多
else if(pageStart+pageSize>=dataNum){
data(pageStart,pageSize);
console.log("没有更多数据了");
//没有更多数据了
}else{
data(pageStart,pageSize);
console.log("显示dataNum"+dataNum+"pageSize"+pageSize+"pageStart"+pageStart);
//显示
}
}
function data(pageStart,pageSize){
//业务
var result="";
for(var i=pageStart;i<(pageStart+pageSize);i++){
result+='<div class="goode-msg">'+
'<div class="goods">'+
'<p class="goode-name">呜呜呜呜</p>'+
'<span class="goods-price">价格:10元</span>'+
'<span class="icon-golden"></span>'+
'<span class="goods-golden">送1111</span>'+
'</div>'+
'<div class="buycon">'+
'<a class="buybtn buybtnabled" onclick="shop(5)">立即购买</a>'+
'</div>'+
'</div>'
}
console.log(jQuery);
jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
var flag=counter++<(dataNum/pageSize)
console.log(dataNum/pageSize);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((!flag)); //参数为true代表没有更多数据了。
var scroll = document.body.querySelector('.mui-scroll .mui-table-view');
var item = document.body.querySelectorAll('.goode-msg');
console.log(counter);
if(flag){
console.log(counter);
pageStart=counter*pageSize;
data(pageStart,pageSize);
}
}, 1500);
}
})();
</script>

4、与服务端联调时 js做了改动,如下:

//加载更多
 var pageSize = 15;//每页显示条数
 var counter = 1;//计数器
 var pageStart = 0;//开始数据条数
 var Flag=true;
 data();
 function data() {
  //业务
  var result = "";
  $.ajax({
   type: 'post',
   url: '/xxx/xxx',
   async: false,
   dataType: "json",
   data: {page: counter},
   success: function (data) {
    Flag=data[0].dd==null||data[0].dd==undefined||data[0].dd=='';
//判断是否有返回值 当没有返回值的时候就为空,则代表没有更多数据了
    console.log(Flag);
    if(Flag==false){
     counter++;
    }
    $.each(data[0].dd, function (i, value) {
     result += '<div class="goode-msg">' +
       '<div class="goods">' +
       '<input type="hidden" class="id" value="'+value.id+'">' +
       '<input type="hidden" class="aa" value="'+value.aa+'">' +
       '<p class="goode-name" id="title'+value.id+'">'+value.title+'</p>' +
       '<input type="hidden" class="goods-price-cent" value="'+value.price.cent/100+'">' +
       '<span class="goods-price">价格:<b id="price'+value.id+'">'+value.price.cent/100+'</b>元</span>' +
       '<span class="icon-golden"></span>' +
       '<span class="goods-golden">送<b id="ss'+value.id+'">'+value.ss+'</b>ss</span>' +
       '</div>' +
       '<div class="buycon">' +
       '<a class="buybtn buybtnabled" onclick="shop('+i+')">立即购买</a>' +
       '</div>' +
       '</div>'
    });
    jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
   }
  }
 );
}
/**
 * 上拉加载具体业务实现
 */
function pullupRefresh() {
 setTimeout(function () {
  mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //参数为true代表没有更多数据了。
  data();
 }, 1500);
}
})();

5、踩的坑

注意:一定要先引入jquery、mui.js否则 js代码会不识别mui。

在jquery中,如果要给动态生成的节点绑定事件,以前要用live,现在用delegate或者on,原理是利用冒泡实现事件委托,也就是给生成节点的父节点预先绑定事件。

以上所述是小编给大家介绍的mui上拉加载功能实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
JavaScript构造函数详解
Dec 27 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
vue实现简单加法计算器
Oct 22 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 #Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 #Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 #Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 #Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 #Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 #Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 #Javascript
You might like
php知道与问问的采集插件代码
2010/10/12 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
mouse_on_title.js
2006/08/25 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
tornado 多进程模式解析
2018/01/15 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
python验证身份证信息实例代码
2019/05/06 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
python中random模块详解
2021/03/01 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
廉政教育心得体会
2014/01/01 职场文书
企业消防安全制度
2014/02/02 职场文书
教师现实表现材料
2014/02/14 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
实战Python爬虫爬取酷我音乐
2022/04/11 Python
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS