好资源导航 » 文章资讯 » mui上拉加载功能实例详解

mui上拉加载功能实例详解

2024-02-25 18:50:03 170

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

1、需要引入的css、js

2、静态页的dom结构

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


(function(){
//上拉加载下拉刷新
mui.init({
pullRefresh:{
container:'#pullrefresh',
up:{
contentrefresh:'正在加载...',
callback:pullupRefresh
}
}
});
//加载更多
vardataNum=12;//获取数据总数
varpageSize=3;//每页显示条数
varcounter=1;//计数器
varpageStart=0;//开始数据条数
getData(pageStart,pageSize);
functiongetData(pageStart,pageSize){
//显示数不足每页显示条数
if(dataNum-pageStart=dataNum){
data(pageStart,pageSize);
console.log("没有更多数据了");
//没有更多数据了
}else{
data(pageStart,pageSize);
console.log("显示dataNum"+dataNum+"pageSize"+pageSize+"pageStart"+pageStart);
//显示
}
}
functiondata(pageStart,pageSize){
//业务
varresult="";
for(vari=pageStart;i<(pageStart+pageSize);i++){
result+=''+
''+
'呜呜呜呜'+
'价格：10元'+
''+
'送1111'+
'

'+ ''+ '立即购买'+ '

'+ '' } console.log(jQuery); jQuery(result).insertBefore('#pullrefresh.mui-scroll.mui-table-view'); } /** *上拉加载具体业务实现 */ functionpullupRefresh(){ setTimeout(function(){ varflag=counter++<(dataNum/pageSize) console.log(dataNum/pageSize); mui('#pullrefresh').pullRefresh().endPullupToRefresh((!flag));//参数为true代表没有更多数据了。 varscroll=document.body.querySelector('.mui-scroll.mui-table-view'); varitem=document.body.querySelectorAll('.goode-msg'); console.log(counter); if(flag){ console.log(counter); pageStart=counter*pageSize; data(pageStart,pageSize); } },1500); } })();

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

//加载更多
varpageSize=15;//每页显示条数
varcounter=1;//计数器
varpageStart=0;//开始数据条数
varFlag=true;
data();
functiondata(){
//业务
varresult="";
$.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+=''+
''+
''+
''+
''+value.title+''+
''+
'价格：'+value.price.cent/100+'元'+
''+
'送'+value.ss+'ss'+
''+
''+
'立即购买'+
''+
''
});
jQuery(result).insertBefore('#pullrefresh.mui-scroll.mui-table-view');
}
}
);
}
/**
*上拉加载具体业务实现
*/
functionpullupRefresh(){
setTimeout(function(){
mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag));//参数为true代表没有更多数据了。
data();
},1500);
}
})();

5、踩的坑

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

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

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

返回顶部
3162201930
czq8825@qq.com

mui上拉加载功能实例详解

热门推荐

随机推荐