js原生实现上拉加载功能
2019_6_15js原生实现上拉加载主要原理是 视图窗口的可视高度,滚动条当前位置,和滚动窗口的高度直接的关系function SelectCandidatesData(type, page, keyword) {// 请求数据return new Promise()}var vm = new Vue({data: {page: 1,...
·
2019_6_15
js原生实现上拉加载
主要原理是 视图窗口的可视高度,滚动条当前位置,和滚动窗口的高度直接的关系
function SelectCandidatesData(type, page, keyword) {
// 请求数据
return new Promise()
}
var vm = new Vue({
data: {
page: 1,
title: '全部'
morDataTxt: '上拉加载更多数据'
},
created(){
this.fetchItemList()
},
mounted() {
let _this = this
window.addEventListener('scroll', this.throttle(_this.pullUp, 16))
},
beforeDestroy() {
window.removeEventListener('scroll', this.throttle)
},
async fetchItemList() {
const d = await SelectCandidatesData(1, this.page, this.title)
if (d.errcode == 0) {
this.itemList = [...this.itemList, ...d.data.candidates_info]
if(!d.data.candidates_info.length) {
this.moreDataTxt = '暂无更多数据'
}
}
},
// 滚动条丽顶部的距离
getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop
},
// 窗口可视区域高度
getClientHeight() {
return document.documentElement.clientHeight || document.body.clientHeight
},
// 滚动区域高度
getScrollHeight() {
return document.documentElement.scrollHeight || document.body.scrollHeight
},
pullUp() {
let _this = this
let scrollTop = this.getScrollTop()
let clientHeight = this.getClientHeight()
let scrollHeight = this.getScrollHeight()
// 滚动条 + 可视区域高度 >= 滚动条高度 ==> 滚动条触底
if (scrollTop + clientHeight >= scrollHeight) {
this.page++
this.throttle(_this.fetchItemList(), 30)
}
},
throttle(fn, delay) {
let lastTime = 0
return function(){
let nowTime = Date.now()
if(nowTime - lastTime > delay) {
fn.call(this)
lastTime = nowTime
}
}
}
})
更多推荐
已为社区贡献5条内容
所有评论(0)