- it技术
- 2020-10-20
js上拉加载（vue）
<ul class="u-f-log">
<li class="u-f-log-alone" v-for="item in log">
<div class="u-f-log-alone-info">
<div class="iconfont icon-dingdan1"></div>
<div class="u-f-log-alone-info-text">
<div>{{item.remarks}}
</div>
<div>{{item.active_time}}
</div>
</div>
</div>
<div class="u-f-log-alone-price">+{{item.yongjin}}
</div>
</li>
<li class="public-none" v-if="loading_over">~已经没有数据了~
</li>
</ul>
data
: {
return(){
log
:[],
page
: 1,
is_loading
:false,
loading_over
:false,
is_search
: false,
init_search_list
: true
}
}
methods
: {
getFanli
: function(callback
){
var that
= this;
var layload
layer
.ready(function(){
layload
=layer
.load();
});
that
.$http
.post("{:url('api/user/getMyFanli')}",{"_ajax": "1","page": that
.page
,token
:localStorage
.getItem('token'),"limit":14}, {emulateJSON
: true}).then(function (res
) {
console
.log(res
);
that
.yue
= res
.data
.data
.money
;
that
.leiji
= res
.data
.data
.taotal_fanli
;
that
.dai
= res
.data
.data
.daifanli
;
layer
.close(layload
);
if(that
.page
===1){
that
.log
= res
.data
.data
.list
;
}else{
for(var i
in res
.data
.data
.list
){
that
.log
.push(res
.data
.data
.list
[i
]);
}
}
that
.page
++;
that
.$nextTick(function() {
if(res
.data
.data
.list
.length
== 0) {
that
.loading_over
= true;
}
callback()
})
}, function (err
) {
console
.log(JSON.stringify(err
));
});
}
}
mounted
: function() {
var that
= this;
that
.getFanli(function(){});
window
.onscroll = function(){
if(parseInt((getScrollTop() + getWindowHeight() + 100)) >= getScrollHeight()){
if(that
.is_loading
) {
return false;
}
if(that
.loading_over
) {
return false;
}
that
.is_loading
= true;
that
.getFanli(function() {
that
.is_loading
= false;
});
}
};
}
公共方法：
function getScrollTop(){
var scrollTop
= 0, bodyScrollTop
= 0, documentScrollTop
= 0;
if(document
.body
){
bodyScrollTop
= document
.body
.scrollTop
;
}
if(document
.documentElement
){
documentScrollTop
= document
.documentElement
.scrollTop
;
}
scrollTop
= (bodyScrollTop
- documentScrollTop
> 0) ? bodyScrollTop
: documentScrollTop
;
return scrollTop
;
}
function getScrollHeight(){
var scrollHeight
= 0, bodyScrollHeight
= 0, documentScrollHeight
= 0;
if(document
.body
){
bodyScrollHeight
= document
.body
.scrollHeight
;
}
if(document
.documentElement
){
documentScrollHeight
= document
.documentElement
.scrollHeight
;
}
scrollHeight
= (bodyScrollHeight
- documentScrollHeight
> 0) ? bodyScrollHeight
: documentScrollHeight
;
return scrollHeight
;
}
function getWindowHeight(){
var windowHeight
= 0;
if(document
.compatMode
== "CSS1Compat"){
windowHeight
= document
.documentElement
.clientHeight
;
}else{
windowHeight
= document
.body
.clientHeight
;
}
return windowHeight
;
}
