需求

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

遇到的問題

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

排查過程

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

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

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

采用了requestAnimationFrame方法后再次測試，暫時沒有發(fā)現(xiàn)問題，而后會繼續(xù)測試，有問題會在博客里追加。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。