js原生がアップロード機能を実現します.
11563 ワード
2019_6_15
js原生がアップロードを実現
主な原理はビューウィンドウの視認性の高さ、スクロールバーの現在位置、スクロールウィンドウの高さと直接の関係です.
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
}
}
}
})