先上效果圖：

創(chuàng)新互聯(lián)建站專注于大名企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站定制開發(fā)。大名網(wǎng)站建設(shè)公司,為大名等地區(qū)提供建站服務(wù)。全流程按需求定制制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

（1） 看起來可能有點卡頓，但是實際上頁面上看起來挺順暢的。

（2） 思路就是獲取每一個列表的寬度，設(shè)置定時器移動列表，當(dāng)移動的距離達(dá)到一個列表的寬度的時候，把這個距離放到數(shù)組的最后。這樣就能達(dá)成無縫循環(huán)滾動了。

 大致的情況就是下面這樣：

接下來就是代碼的實現(xiàn)：

index.vue 引入組件

marquee.vue 組件頁面

（1） 添加一個獲取margin的方法，是為了保證如果是使用 rem em 等單位時，margin值不會出現(xiàn)偏差的情況

（2） 如果引入組件的頁面中，send-val的值是異步請求的。那么，在marquee.vue組件頁面，多數(shù)情況會獲取不了 refs 。這時候我自己的解決方法是：

 表示只有當(dāng) send 不為空的時候才渲染該組件，不過這種情況會導(dǎo)致如果 請求響應(yīng)太慢，組件會一直渲染不出來，就可能會影響布局。

（3） 如果不想每次都去設(shè)置transform，那么可以把transform放到該元素上，然后修改data中的數(shù)據(jù)就行了，比如：

// 然后在 js 中把 每次移動的值，賦值給cssStyle就行了。不過我感覺這種沒什么區(qū)別

 如果想實現(xiàn)，上下無縫滾動，這種效果。思路和左右無縫滾動一樣，基本上只需要把 transform 改成 Y軸移動 ，每個列表的寬度改成高度就行了。

不清楚這種方式實現(xiàn)是否會有什么問題，F(xiàn)PS一直保持在 接近60左右。暫時沒發(fā)現(xiàn)什么缺點。。。

以上所述是小編給大家介紹的vue自定義marquee無縫滾動組件詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！