首頁猿問 javascript上拉加載數(shù)據(jù)，...

javascript上拉加載數(shù)據(jù)，在vue.js中的實(shí)現(xiàn)?

JavaScript

梵蒂岡之花 2019-03-21 22:19:57

如何在javascript中實(shí)現(xiàn)上拉加載功能，以及如何在vue.js中實(shí)現(xiàn)scroll的監(jiān)聽？在做上拉加載時(shí)，需要面臨幾個(gè)問題如何監(jiān)聽scroll滾動(dòng)條滾動(dòng)的事件?如何判斷scroll已經(jīng)滾動(dòng)到底部了?處理scroll的offset和documentElement的Height關(guān)系

查看完整描述

4 回答

米琪卡哇伊

TA貢獻(xiàn)1998條經(jīng)驗(yàn) 獲得超6個(gè)贊

剛好我前天寫了一個(gè)簡(jiǎn)易的你參考一下？
github

反對(duì) 回復(fù) 2019-04-11

狐的傳說

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊

你忽略了一個(gè)問題，因?yàn)闈L動(dòng)不一定100%發(fā)生在window上面，有可能是發(fā)生在你某個(gè)div里面，如果是發(fā)生在div里面，那么你綁定scroll事件到window上面是不會(huì)生效的。

反對(duì) 回復(fù) 2019-04-11

波斯汪

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個(gè)贊

相關(guān)代碼

// 監(jiān)聽滾動(dòng)條

new Vue({

beforeMount: function() {

// 監(jiān)聽scroll事件

window.addEventListener('scroll', this.handleScroll)

},

beforeDestroy () {

window.removeEventListener('scroll', this.handleScroll)

},

data: {},

mothods: {

handleScroll: function() {

// handle you scroll event

// 最大的頁面Y方向offset 加上窗口的高度等于文檔的高度

// max(window.pageYOffset) + window.innerHeight === document.documentElement.scrollHeight

if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight) {

// 處理上拉加載事件放在這里

// 獲取服務(wù)端數(shù)據(jù)方法

// 如果想使用預(yù)加載數(shù)據(jù)，即，即將滑動(dòng)到底部時(shí)候就加載數(shù)據(jù)

// window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight - 20

}

})

反對(duì) 回復(fù) 2019-04-11

4 回答
0 關(guān)注
783 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

javascript上拉加載數(shù)據(jù)，在vue.js中的實(shí)現(xiàn)?

javascript上拉加載數(shù)據(jù)，在vue.js中的實(shí)現(xiàn)?

4 回答

添加回答

javascript上拉加載數(shù)據(jù)，在vue.js中的實(shí)現(xiàn)?

javascript上拉加載數(shù)據(jù)，在vue.js中的實(shí)現(xiàn)?