首頁猿問 Vue...

Vue 實現(xiàn)帶有頁腳的頁面上拉加載，有什么思路？

JavaScript

一只斗牛犬 2019-05-20 09:40:22

用better-scroll也好，vue-infinite-scroll/loading也罷，只要不是自己手動計算高度，有什么解決的思路嗎？需求：但是頁腳（elementui里面那個footer）是是始終在列表區(qū)域下方的，也就是說新加載的數(shù)據(jù)要加在列表區(qū)域和頁腳之間。且頁腳不能固定，隨整個頁面滑動。要同時兼容PC和Mobile。

查看完整描述

2 回答

收到一只叮咚

TA貢獻(xiàn)1821條經(jīng)驗獲得超5個贊

需求說的不是很清楚，我就按照我的理解來做了首先footer用fixed定位，固定在頁面底部然后用vue的列表循環(huán)渲染數(shù)據(jù)列表，注意在最后一個元素加一個margin-bottom（也可以用padding），這樣可以使得footer不遮蓋最后一個元素最后用window.onscroll=fn或者addEventListener('scroll',fn)來監(jiān)聽滾動事件，當(dāng)文檔高度等于滾動高度加上頁面高度的時候，更新數(shù)據(jù)，由于vue雙向綁定的原因，數(shù)據(jù)會自動渲染出來

反對回復(fù) 2019-05-20