mui上拉加载功能实例详解

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

1、需要引入的css、js

2、静态页的dom结构

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

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

5、踩的坑

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

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

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