mui上拉加载功能实例详解
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
最近长沙网络推广在做移动端的项目，用到了mui的上拉加载功能，今天长沙网络推广给大家整理一下分享到狼蚁SEO平台，需要的朋友参考下
最近在做移动端的项目，用到了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上拉加载功能实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！