最近在做移动端的项目，用到了mui的上拉加载，整理如下：
1、需要引入的css、js
<link href="https://www.jb51.net/common/mui/css/mui.min.css" > <script src="https://www.jb51.net/js/jquery-3.2.0.min.js"></script> <script src="https://www.jb51.net/common/mui/js/mui.min.js"></script>
2、静态页的dom结构
<div> <div> <div> </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>'+ '<div>'+ '<p>呜呜呜呜</p>'+ '<span>价格：10元</span>'+ '<span></span>'+ '<span>送1111</span>'+ '</div>'+ '<div>'+ '<a>立即购买</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>' + '<div>' + '<input type="hidden" value="'+value.id+'">' + '<input type="hidden" value="'+value.aa+'">' + '<p>'+value.title+'</p>' + '<input type="hidden" value="'+value.price.cent/100+'">' + '<span>价格：<b>'+value.price.cent/100+'</b>元</span>' + '<span></span>' + '<span>送<b>'+value.ss+'</b>ss</span>' + '</div>' + '<div>' + '<a>立即购买</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上拉加载功能实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: