使用js實現列表無限迴圈滾動

最近的業務有涉及到需要將列表做成無限迴圈滾動，即第乙個element滾出邊界之後需要自動跳到隊尾，參與下一輪滾動，達到無限滾動的效果。

最終實現效果如上圖所示，下面講一下思路。

jsv-for="index in 8":key="index"class="scroll-item":style="styleformatter(index - 1)"ref="scrollitem"

//css.scroll-container

.scroll-item

初始化時，會將scroll-item的定位改為絕對定位，相對元素是scroll-container，然後根據每個元素的寬度給每個scroll-item賦上left值，這樣就可以讓每個元素都無縫銜接上了（比如說每個元素的寬度都是200px，那麼第乙個元素left就是0，第二個元素left就是200px，以此類推，當然也可以設定為不等寬以及加上margin，思路是一樣的）。scroll-item包含在scroll-container容器內，首先scroll-container需要將overflow設定成hidden，將超出範圍的元素進行隱藏。至於滾動效果，本demo使用的是transition來控制元素滾動動畫。在已知每個元素的寬度（假設為width）的情況下，可以將left從初始位置滾動到-width，則元素會完全隱藏掉，再通過修改css中transition-duration屬性來控制動畫執行時間即可。

以本demo為例，每個scroll-item的寬度都為200px，滾動速度是30px/s，那麼第乙個元素的transition-duration就是(200 / 30) = 6.67s了，以此類推。具體實現如下:

//根據索引計算當前元素所在位置

styleformatter (index) px`

}}//控制滾動開始

scroll () s`

ele.style.left = `-$px`})}

styleformatter()是根據每個元素的索引以及寬度來初始化每個元素的left，在本demo中還加上了background-color方便識別。重點是scroll()裡面，這裡面用到了我們小學二年級學到的公式，路程 = 速度 x 時間，已知該元素需要行走的路程是自身的位置offsetleft加上自身的寬度width，以及速度speed（自定義），易得該元素需要行走的時間time，也就是對應這裡面的動畫執行時間transition-duration。這樣就可以保證每個scroll-item的執行速度是一致的，以及每乙個元素是能夠銜接起來的。

這樣就能夠實現一輪動畫了，下面開始思考如何實現無限滾動。當第乙個元素完成動畫（已經完全隱藏了）的時候，將其插入到剩下元素中的隊尾，重新開始執行動畫，是不是就可以實現無限滾動了。我們知道元素是有個事件叫transitionend，可以監聽當前的動畫是否已經執行完畢。那麼事情就變得簡單了，試試看：

//
初始化listener，監聽滾動動畫
//當元素完全滾動至顯示範圍外時，則將該元素插入隊尾
initlistener () px`
//渲染完畢之後開始滾動
this.$nexttick(() =>s`
ele.style.left = `-$px`
})})
})}//
計算最後乙個元素的位置
lastestelementposition () ))
}

通過addeventlistener來監聽transitionend事件，當動畫執行完畢之後，把當前元素插入到隊尾。這時候需要去找到執行列表的最後乙個元素，通過每個元素的left值來判斷，left值最大則代表該元素是滾動列表中的最後乙個元素。注意，這裡需要先將transition-duration設定為0，不然元素從當前位置移動至隊尾會有乙個動畫過程。

將元素移動至隊尾之後，剩下的時候就好處理了，處理方式跟scroll()方法一致。

至此，將列表無限迴圈滾動就實現出來了，完整**在下面，有需自取。

v-for="index in 8":key="index"class="scroll-item":style="styleformatter(index - 1)"ref="scrollitem"
>}
}

使用js實現列表無限迴圈滾動

利用js實現列表向上無限滾動

js 我們需要無限滾動列表嗎？

react實戰筆記無限迴圈滾動列表例項

使用js實現列表無限迴圈滾動

利用js實現列表向上無限滾動

js 我們需要無限滾動列表嗎？

react實戰筆記 無限迴圈滾動列表例項

相關推薦

react實戰筆記無限迴圈滾動列表例項