vue上拉加載更多 vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例?
vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例?有兩種方法可以在Vue中實(shí)現(xiàn)上拉加載更多數(shù)據(jù)。一種是監(jiān)控滾動(dòng)條的滾動(dòng)距離,當(dāng)滾動(dòng)條即將滾動(dòng)到底部時(shí),觸發(fā)下一頁(yè)的加載。另一個(gè)想法是使用交叉觀察者。當(dāng)觸發(fā)視差
vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例?
有兩種方法可以在Vue中實(shí)現(xiàn)上拉加載更多數(shù)據(jù)。一種是監(jiān)控滾動(dòng)條的滾動(dòng)距離,當(dāng)滾動(dòng)條即將滾動(dòng)到底部時(shí),觸發(fā)下一頁(yè)的加載。另一個(gè)想法是使用交叉觀察者。當(dāng)觸發(fā)視差交叉時(shí),將觸發(fā)加載下一頁(yè)的方法
加載和顯示新數(shù)據(jù)是Vue中最簡(jiǎn)單的方法。只需向數(shù)據(jù)中添加一個(gè)新值:方法:{loadmore:function(){yourajax方法(function(moredata){此.items.push(更多數(shù)據(jù))}。Bind(this))}另一個(gè)問(wèn)題是如何觸發(fā)loadmore。這里,就像你說(shuō)的,滾動(dòng)。因此您需要監(jiān)視滾動(dòng)事件或使用其他滾動(dòng)插件,例如iscroll,在相應(yīng)的回調(diào)中調(diào)用loadmore
~窗口.onscroll=函數(shù)(){var t=document.documentElement.scrollTop文件|| document.body.scrollTop文件//與頂部的距離var H=窗內(nèi)高度|| document.documentElement.clientHeight文件|| document.body.clientHeight文件//可視寬度if(T>=document.documentElement.scrollHeight文件-H) {alert(“222”)}
它是否會(huì)在每次重新加載數(shù)據(jù)時(shí)重新生成與整個(gè)arr對(duì)應(yīng)的DOM?如果是這樣,則將其更改為DOM的append模式,并且只創(chuàng)建新加載的數(shù)據(jù)作為相應(yīng)的DOM,并且每次重新加載數(shù)據(jù)時(shí)都將其追加到原始列表中