vue滚动分页加载数据

<div class="content" ref="scrollContainer" @scroll="LoadMore()">
	<ul ref="tabContent">
		<li  class="list-item" v-for='item in ShareList'>
						
		</li>
	</ul>
</div>
			var vm = new Vue({
				el:"#app",
				data:{
					containerHeight:0, //获取容器高度
	    			contentHeight:0,//加载数据内容高度
	    			pageNum:1, //页数
	    			pageCount:15, //条数
	    			isPullupLoadData:false    //是否继续请求
                    }
				mounted(){
					var _self=this;
					_self.containerHeight=_self.$refs.scrollContainer.offsetHeight;  //获取容器高度
				},
					//		请求数据
					requested(){
						var _self=this;
						var params = {
					      "token": app.globalData.token + "",
					      'pageNum':_self.pageNum +'',
					      'pageCount':_self.pageCount +''
					    };
					    app.requestMethod("getShareDetail",params,function(res){
					    	console.log(res);
					    	if(res.data.code==200){
					    		console.log(res.data.data)
					    		_self.ShareList = res.data.data.list;
					    		console.log(_self.ShareList)
					    		_self.$nextTick(function(){
					    			_self.contentHeight=_self.$refs.tabContent.offsetHeight;
					    			_self.isPullupLoadData = true;
						    		console.log(res.data.data.length)
						    		console.log(_self.containerHeight)
					    		})
					    		
					    	}
					    });
					},
				LoadMore(){
				    var _self=this;
					var scrollTop=_self.$refs.scrollContainer.scrollTop;
			    	//判断是否已经到了底部50px处
			    	//到了,判断是否还可以继续加载
			    	//可以加载请求数据,渲染后重新获取tabContainer高度
			    	//再判断数据是否已经加载完毕了
//			    	console.log(scrollTop);
			    		
			    	if(_self.isPullupLoadData==true){
			    		if(scrollTop+_self.containerHeight>_self.contentHeight-30){
			    			_self.isPullupLoadData = false;
			    			_self.pageNum=_self.pageNum+1;
		    				var params = {
							    "token": app.globalData.token + "",
							     'pageNum':_self.pageNum +'',
							     'pageCount':_self.pageCount +''
							    };
							 app.requestMethod("getShareDetail",params,function(res){
							 console.log(res);
							 if(res.data.code==200){
							    console.log(res.data.data)
							    var data= res.data.data.list;
							    _self.ShareList=_self.ShareList.concat(data);
							    			                
                               _self.contentHeight=_self.$refs.tabContent.offsetHeight;
								    		
							    if(res.data.data.list.length !=0){
							    	_self.isPullupLoadData = true;
							    }
							    	}
							    });
				    		}
			    		}

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值