mui上拉加载功能实例详解

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',

asynhttp://c: 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上拉加载功能实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。