Vue下滾動到頁面底部無限加載數(shù)據(jù)Demo

elarity 發(fā)布于2019-08-22 16:36 / 2975人閱讀

摘要：下滾動到頁面底部無限加載數(shù)據(jù)看到一篇覺得挺實用的就看了下順便簡單翻譯了一下給需要的人參考從這個項目中可以加深對的生命周期的理解何時開始請求如何結合使用原生來寫事件等等我這里主要是對原文的重點提取和補充本文技術要點生命周期簡單用法格式化日期圖

Vue下滾動到頁面底部無限加載數(shù)據(jù)Demo

看到一篇Implementing an Infinite Scroll with Vue.js, 覺得挺實用的就看了下, 順便簡單翻譯了一下給需要的人參考.

從這個項目中可以加深對Vue的生命周期的理解, 何時開始axios請求, 如何結合Vue使用原生js來寫scroll事件等等, 我這里主要是對原文的重點提取和補充

本文技術要點

Vue生命周期

axios簡單用法

moment.js格式化日期

圖片懶加載

結合原生js來寫scroll事件

請求節(jié)流

創(chuàng)建項目

首先創(chuàng)建一個簡單的vue項目

# vue init webpack-simple infinite-scroll-vuejs

然后安裝項目所需要用的一些插件

# npm install axios moment

初始化用戶數(shù)據(jù)

項目搭建完后, 跑起來看看

# npm run dev

打開http://localhost:8080無誤后, 我們開始修改代碼, 先看看獲取用戶數(shù)據(jù)這塊,

這里原作者也專門提醒, 完全沒有必要也不建議在加載頁面的時候請求5次, 只是這個接口一次只能返回1條數(shù)據(jù), 僅用于測試才這樣做的. 當然我這里也可以通過Mock來模擬數(shù)據(jù), 就不詳細說了~

接下來來寫模板結構和樣式, 如下:

這樣頁面就能顯示5個人的個人信息了.

處理無限滾動加載邏輯

我們接下來需要在methods里面添加scroll()來監(jiān)聽滾動, 并且這個事件是應該在mounted()這個生命周期內的. 代碼如下:

這段代碼原文是有一點拼寫錯誤的. 我這里修正了, 另外增加了距離底部即開始加載數(shù)據(jù), 并進行截流.

保存好, 回到瀏覽器, 查看效果, 已經(jīng)沒有問題了~

總結

滾動到頁面底部無限加載的功能在Vue上實現(xiàn)其實和普通的頁面開發(fā)差不多, 每次滾動加載未完成的情況下不會觸發(fā)請求下一次, 每次請求push到數(shù)組內, 通過的數(shù)據(jù)綁定實現(xiàn)了懶加載(其實0 0我不太認可...), 看完是不是感覺挺簡單的.

最后, 我把這個也弄了一份在GitHub上面, 有需要的可以看看infinite-scroll-vuejs-demo~

云服務器 GPU云服務器 js滾動條到最后數(shù)據(jù)自動加載 js滾動加載數(shù)據(jù) js 滾動加載數(shù)據(jù) 頁面底部

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94497.html

超酷的 mip-infinitescroll 無限滾動（無限下拉）

摘要：寫在前面無限滾動又叫做無限下拉技術被廣泛應用于新聞類，圖片預覽類網(wǎng)站。因此，繼列表組件之后，為提升用戶體驗，開發(fā)了無限滾動組件。屬性非必選項與模板對應，用來標識所采用的模板，默認取組件子節(jié)點中的模板。寫在前面無限滾動（又叫做無限下拉）技術被廣泛應用于新聞類，圖片預覽類網(wǎng)站。對用戶來講，使用無限滾動的頁面有源源不斷的信息可以預覽，增加用戶在頁面的停留時長。技術上原理也很簡單，在頁面加...

CloudwiseAPM 2019-08-20 15:09 評論0 收藏0
vue 模仿今日頭條demo

vue 頭條 demo 寫在前面總結一下寫 demo 過程中遇到的一些問題，方便自己的學習總結！如有錯誤，還請指正！一直想學習使用 vue ，并準備以后在實際項目使用，之前跟著慕課網(wǎng) 黃軼老師敲了一下餓了么商品購買頁的demoele效果預覽該 demo 借鑒自 hcy1996-github 這個項目，但內部內容，布局風格，完全不同，只為共同學習，共同交流數(shù)據(jù)接口直接打開今日...

simpleapples 2019-08-21 12:03 評論0 收藏0
如何實現(xiàn)無限滾動

摘要：簡介無限滾動對我們來說已經(jīng)是很常見的功能了，具體表現(xiàn)為當頁面滾動到某個位置時就自動加載數(shù)據(jù)，本文將探討無限滾動的實現(xiàn)原理以及優(yōu)化。簡介無限滾動對我們來說已經(jīng)是很常見的功能了，具體表現(xiàn)為當頁面滾動到某個位置時就自動加載數(shù)據(jù)，本文將探討無限滾動的實現(xiàn)原理以及優(yōu)化。原理我們先看看最簡單的無限滾動的例子： function fetchData() { fetch(path).the...

antz 2019-08-19 18:08 評論0 收藏0
每日 30 秒 ? 判斷是否為頁面底部

showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 簡介分頁、優(yōu)化、可視區(qū)域、無限加載寫前端頁面時最經(jīng)常遇到的開發(fā)需求之一就是渲染后端數(shù)據(jù)返回的數(shù)據(jù)對象，當數(shù)據(jù)對象數(shù)量極多的時候便需要進行分頁。常見的分頁方式有三種：在頁面底部生成上一頁、下一頁、頁面列表按鈕。用戶可以很直接的選擇...

callmewhy 2019-08-26 13:36 評論0 收藏0
設計無限滾動下拉加載，實踐高性能頁面真諦

摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設計實踐。無限滾動加載背后的技術挑戰(zhàn)其實比想象中要多不少。整體思路和方案設計我們要實現(xiàn)的頁面樣例如圖，它能夠做到無限下拉加載內容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設計實踐。無限滾動加載在互聯(lián)網(wǎng)上到處都有應用：豆瓣...

Hanks10100 2019-08-20 14:39 評論0 收藏0