码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-10-25 19:50:13      阅读:1820      评论:0      收藏:0      [点我收藏+]

标签:加载   title   logs   red   16px   end   body   vue.js   pen   

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简单的下拉刷新分页(全部代码展示)

标签:加载   title   logs   red   16px   end   body   vue.js   pen   

原文地址:http://www.cnblogs.com/cnn2017/p/7730708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!