問題：在頁面遇到滑動特別卡的情況就是在頁面使用了動態樣式或者動態類，做切換的時候頁面重新渲染導致頁面滑動卡頓

解決：把動態樣式和動態類做的樣式切換改為通過獲取元素修改樣式屬性值

循環修改樣式示例?

bannerList.forEach((_, index) => {uni.getElementById(`swiper-dot-${index}`)?.style.setProperty('backgroundColor', e.detail.current == index ? '#fff' : '#ededed');uni.getElementById(`swiper-dot-${index}`)?.style.setProperty('width', e.detail.current == index ? '18px' : '12px');
})

優化總結

1.減少dom數量，少套無用的殼，在一個元素渲染更多的內容

2.頁面編寫優化

1. 請使用transform方式，而不是給dom的left/top/width/height等position參數重新賦值。這個在web開發也一樣，直接改position參數不如使用transform。因為每次修改position參數都要過排版，而transform不用。
2. 請拿到dom的id/ref，調用js api操作，而不是通過模板style綁定data操作。因為操作data需要vue框架做diff對比，直接API操作則可以跳過vue框架。在touch和滾動中，16毫秒一幀才能達到最平滑的效果，多了幾毫秒就可能掉幀。
3. 首先還是dom元素數量和層級，直接影響排版
4. 給dom元素指定明確的寬高，而不是很多自適應計算，可以提高排版效率。比如父節點未指定寬高，需要等所有子節點計算好寬高后把父節點撐開，這樣就會比較低效。
5. 指定主軸方向的尺寸可以減少遞歸的深度
6. 文字測量屬于耗時操作，給text組件指定寬高可以提升排版效率
7. 指定圖片的尺寸信息可以減少排版次數
8. css單位尺寸性能比較，px > rpx > 百分比，使用百分比時父節點有明確寬高或者不依賴子節點確定寬高可以提升排版效率

?3.數據更新優化，減少數據對象的修改，盡量不要修改整個對象數組，去修改對象數組里面需要修改的值

官方說明：?

?