Mate60手機殼曝光 致敬自己的經典設計
8月3日消息，今天下午博主數碼閑聊站帶來了華為Mate60的第三方手機殼圖，可以讓我們在真機發布之前看看這款華為全新旗艦的大致輪廓。從曝光的圖片看，Mate 60背后攝像頭面積依然
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心！
最近有一個需求，需要在頁面中做一個垂直方向的無限滾動，效果基本為如下，這個滾動是一直在持續的，不斷循環。
這個效果挺有意思的，實現起來不難，所以分享一下！
首先準備一下基礎的頁面，之所以給容器設置 overflow:hidden 是為了把滾動條給去掉，因為我們并不需要滾動條。
圖片
可以看出有些項是不在容器可視范圍內的，且每一項的高度是 22px（每一項的高度可以自己定，我這里就用 22px 來進行示范）。
圖片
接下來得讓這個容器滾動起來，那要怎么滾動呢？可以使用 scrollTo 這個方法來進行滾動~并且為了持續保持滾動，可以使用 requestAnimationFrame 來不斷進行。
每次都對 top 進行遞增，保證容器不斷向上滾動。
圖片
但是我們可以看到，雖然top 一直在遞增，但是滾動到最后就不動了！這是因為這個時候已經滾動到最底部了，那么自然就滾動不了了。
圖片
上面為啥滾到底部就滾不動了呢？因為到最底部了，所以滾不動了呀！
那么想要永遠滾不完應該怎么辦呢？其實有一種辦法，那就是永遠到不了底，那要怎么實現呢？其實很簡單，只要讓數據不斷增加就行！
怎么讓數據不斷增加呢，并且增加的規則是什么呢？其實很簡單，我們每次滾上去一項，就拷貝這一項push 到列表數據末端，這樣就能做到數據永遠滾不完！
圖片
下面是代碼實現，為什么是除以22 呢？因為每一項的高度是 22px。
圖片
現在可以達到想要的無限滾動效果。
圖片
但是其實上面的做法還是有缺點的，因為數據不斷地push也就是不斷地增加，如果頁面保持一段時間的話，會大大占用內存，導致頁面卡頓！！
所以我們可以在適當的時間點，去初始化數據，也就是把數據恢復到一開始樣子，這樣就能避免數據不斷增加了！
那么應該在什么時機去初始化數據呢？并且要怎么初始化才能讓用戶察覺不出來呢？怎么做到無縫銜接進行初始化呢？
通過一個圖告訴大家~其實最好的時機就是在剛好滾動完一輪的時候。
圖片
最終代碼實現如下：
圖片
最終實現效果：
圖片
本文鏈接：http://www.www897cc.com/showinfo-26-95162-0.html突發奇想！Vue3 實現消息無限滾動的新思路！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號