jQuery WEUI滚动加载示例

为什么80%的码农都做不了架构师？>>>   

<div id="parent">

<!--<div class="weui-cells">

<a class="weui-cell weui-cell_access" href="javascript:;">

<div class="weui-cell__bd">

<p>贾正经</p>

</div>

<div class="weui-cell__ft"><span class="state">2017-12-25</span></div>

</a></div>-->

</div>

<div class="weui-loadmore" id="loadmore">

      <i class="weui-loading"></i>

      <span class="weui-loadmore__tips">上拉加载</span>

</div>

 

下面是JS代码

var loading = false;//防止同时进行多个加载，通过loading标记控制

var count = 0;//计数

pullup ();//先调用两次，填充页面

pullup ();

 

$(document.body).infinite(100).on("infinite", function() {

if(loading) return;

loading = true;

pullup ();//请求数据

});

 

function pullup (){

count++;

//console.log(count);

var request_data = {'page':count};

$.ajax({

type: 'get',

url: '/engine/analysis_list?page='+count,

async: true,

data: request_data,

success: function(res){

var $parent = $('#parent');

if(res.status == 1) {

console.log(JSON.stringify(res.data));

if(res.data.length > 0) {

var n = res.data.length;

var $content = $('<div class="weui-cells"></div>');

for(var i = 0; i < n; i++) {

var $list = $('<a class="weui-cell weui-cell_access" href="/analysis_result/show_report?user_id=' + res.data[i].user_id + '&health_analysis_id=' + res.data[i].health_analysis_id + '">' +

'<div class="weui-cell__bd">' +

'<p>' + res.data[i].nickname + '</p>' +

'</div>' +

'<div class="weui-cell__ft"><span class="state">' + res.data[i].health_analysis_index_health_type + '</span></div>' +

'</a>');

$list.appendTo($content);

}

$content.appendTo($parent);

loading = false;

} else {

$('#loadmore').attr('class','weui-loadmore hide');

$(document.body).destroyInfinite();

loading = false;

}

 

} else {

$.toast(res.msg, 'cancel');

}

},

});

}

转载于:https://my.oschina.net/af666/blog/1594478