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