vue简单的下拉刷新分页（全部代码展示）

Posted 2020-10-12

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