mui如何实现上拉加载功能
这篇文章给大家分享的是有关mui如何实现上拉加载功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联是一家专注于成都网站设计、网站建设与策划设计,岱岳网站建设哪家好?创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:岱岳等地区。岱岳做网站价格咨询:028-86922220
最近在做移动端的项目，用到了mui的上拉加载，整理如下：
1、需要引入的css、js
2、静态页的dom结构
3、静态页面 js对应的代码
(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=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+=''+
''+
'呜呜呜呜'+
'价格：10元'+
''+
'送1111'+
'
'+
'
'+
'立即购买'+
' '+
''
}
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);
}
})();
感谢各位的阅读！关于“mui如何实现上拉加载功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
