时间:2021-05-26
最近在做移动端的项目,用到了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上拉加载功能实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在APP制作过程中,下拉刷新和上拉加载时一直配合使用的一对功能,在之前我们给大家分享过用JS相关的上拉加载和下来刷新,有兴趣的朋友可以参考:MUI进行APP混合
本文实例为大家分享了MUI实现上拉加载和下拉刷新展示的具体代码,供大家参考,具体内容如下编写存储过程分页(此处使用T-SQL)CREATEPROC[dbo].[
本文实例讲述了微信小程序实现上拉加载功能。分享给大家供大家参考,具体如下:开发需求进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多
本文实例讲述了vue实现的上拉加载更多数据/分页功能。分享给大家供大家参考,具体如下:加载状态jsexportdefault{name:'',data(){re
本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下加载中...上拉加载...js.//iScroll滚动条/上拉刷新/下拉加载v