html 頁面

<div class="page" id=‘body‘ v-cloak>
	<div class=‘page__bd‘>
	        <div class="weui-cells__title">{{mgname}}庫存操作記錄</div>
	        <div class="weui-cells" id="recordlist"></div>
	        <div id="loadinfo" style="text-align:center;padding:5px;"></div>
    	</div>
</div>
 

　vue.js　

        var tt;	//計時器
	var page=1;
	var rows=20;
	var loading = true;
	var btnclick = false;
$(function(){
	$("#recordlist").html(‘‘);
	reloadRecord();
	app = new Vue({
		el:‘#body‘,
		data:{
			mgname: mgname,
		},
	});
});
//加載記錄列表
	function reloadRecord(){
		if(loading===false){
			$.xy.topTips(‘{:L("已加載全部數據！")}‘,1000);
			return;
		}

 
　　　　　　　　　　　　　　調用方法查詢數據並展示
		$.post("{:URL(‘Storedepot/getMaterialRecords‘)}",{mgid:mgid,sdid:sdid,storeid:storeid,page:page,rows:rows},function(data){
			for(var i in data.data.rows){
				if(data.data.rows[i][‘goodsno‘].substring(0,1) == ‘+‘){
					data.data.rows[i][‘goodsno‘] = ‘<span style="color:#ff0000">‘+data.data.rows[i][‘goodsno‘]+‘ ‘+data.data.rows[i][‘guName‘]+‘<span>‘;
				}else if(data.data.rows[i][‘goodsno‘].substring(0,1) == ‘-‘){
					data.data.rows[i][‘goodsno‘] = ‘<span style="color:#0000ff">‘+data.data.rows[i][‘goodsno‘]+‘ ‘+data.data.rows[i][‘guName‘]+‘<span>‘;
				}
			}
			$.each(data.data.rows,function(index,item){
				htmlStr = ‘<div class="weui-cell">‘
							+‘<div class="weui-cell__bd"><p>‘+item.ctime+‘</p></div>‘
							+‘<div class="weui-cell__ft">‘+item.goodsno+‘</div>‘
							+‘</div>‘;
				$("#recordlist").append(htmlStr);
			});
			//未找到數據，不再加載數據
			if(data.data.total == ‘0‘){
				$("#loadinfo").html("{:L(‘數據不存在‘)}")
			}else if(page*rows >= data.data.total){
				loading = false;
				$("#loadinfo").html("{:L(‘已加載全部數據‘)}");
			}else{
				$("#loadinfo").html(‘‘);
			}
			page++;
		},‘json‘);
	}
	/* 根據滾動條加載數據 */
	window.onscroll=function(){
		if(loading == true){
		　　scrollTop = $(this).scrollTop();
		　　scrollHeight = $(document).height();
		　　windowHeight = $(this).height();

			var height = $(‘#recordlist‘).height();
			var height2 = $(this).height();
			var scrollTop = $(this).scrollTop();
			if((height - scrollTop - height2) < 50){
				//開始加載後面的數據
				if(btnclick == false){
					reloadRecord();
				}
				btnclick = true;
				window.clearTimeout(tt);
				tt = window.setTimeout(function(){
					btnclick = false;
				},500)
			}
		}
	}
 

　　控制器傳過來（總條數，及數據）

$data = array(‘rows‘=>$data,‘total‘=>$total);

vue簡單的下拉刷新分頁（全部代碼展示）