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); } })();

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 += '' +
       '' +
       '' +
       '' +
       ''+value.title+'

' +        '' +        '价格:'+value.price.cent/100+'元' +        '' +        ''+value.ss+'ss' +        '' +        '' +        '立即购买' +        '' +        ''     });     jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');    }   }  ); } /**  * 上拉加载具体业务实现  */ function pullupRefresh() {  setTimeout(function () {   mui('#pullrefresh').pullRefresh().endPullupToRefresh((Flag)); //参数为true代表没有更多数据了。   data();  }, 1500); } })();

感谢各位的阅读!关于“mui如何实现上拉加载功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


新闻名称:mui如何实现上拉加载功能
当前路径:http://scyanting.com/article/gehcoc.html