需求

????????做一個沾滿一屏的輪播，并且輪播里的文字數據都是自定義的，不完全是圖片。

遇到的問題

????????在iPhone12上進行左右滑動的時候回出現卡頓，而在iphone8以及iphone13都試過沒有問題。

排查過程

首先是懷疑前端資源太大導致的，就查看了打包后的資源，發現當時應用了特殊的字體，字體文件有8M，后來通過字蛛進行壓縮（只對應用的文字進行提取）；首次打包上去測試后不卡頓了，但是多次測試又出現卡頓。

其次是懷疑是否是因為圖片太大，數據太多導致的，本打算使用虛擬滾動來解決，但是當時也僅有八張大圖片，而且曾經有使用過虛擬滾動來解決問題并有測試，想著應該可以不用虛擬滾動，就把其當成了最后的解決方案。

最后想到，這個滑動卡頓有可能是掉幀了，隨即查看了Vux關于swiper的源碼，在源碼中該組件文件夾里有一個swiper.js，這里控制了左右滑動（_setTransform()方法），里面使用translate3d進行滑動并動態添加到element的style上，隨后查看了有那幾個地方使用了_setTransform方法；查看到有兩處，一處是_init()，另一處是_onResize()，而后就在這兩處調用的地方使用了window.requestAnimationFrame進行包裹（window.requestAnimationFrame(() => me._setTransform)）。

采用了requestAnimationFrame方法后再次測試，暫時沒有發現問題，而后會繼續測試，有問題會在博客里追加。

? ? ? ? 博客格式等寫的不好，請輕噴，以后會慢慢改進。

總結

以上是生活随笔為你收集整理的Vux使用Swiper遇到的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。