问题描述：如图，点餐小程序，菜品向上滑动时，会同时去更新左侧 菜品分类 的状态。 代码现实见 dishScroll方法。当滚动到第二屏时，列表会直接卡死，并导致手机发热。 当把这行代码里“  :active="index == categoryActiveIndex"” 的categoryActiveIndex去掉时就不会卡顿。只在iOS16.5版本的手机中有这个问题。小程序是使用的uniapp进行开发。 请问下，这个会是什么原因？ // 左侧分类 滑动列表     <scroll-view class="category-container"       scroll-y="true"       :scroll-into-view="scrollIntoCategoryView">             <div         v-for="(categoryItem, index) in dishList"         :key="categoryItem.category.id"         :id="'category-index-' + index"         class="category-item-wrapper"         @click="changeCategory(index)"       >         <CategoryItem           :category="categoryItem.category"           :active="index == categoryActiveIndex" // 问题代码，这种方式使用时会导致scrollview卡死         ></CategoryItem>       </div>       <div style="height: 200px"></div>   </scroll-view> // 右侧菜品滑动列表 <scroll-view class="foods-container" scroll-y scroll-with-animation scroll-animation-duration="200" :scroll-into-view="scrollIntoView" @scroll="dishScroll" > <div v-for="(categoryItem, index) in dishList" :key="categoryItem.category.id" :id="'category-view-' + index" class="category-view-wrapper" > <div class="category-title"> <img src="https://shilai-images.oss-cn-shenzhen.aliyuncs.com/staticImgs/common/icon-hot.png" alt="" v-if='categoryItem.category.isHotCategory' class='hot-img'> {{ categoryItem.category.name }} <div class="hot-tooltip-text" v-if='categoryItem.category.isHotCategory'>人气王｜老板推荐</div> </div> <DishItem v-for="dishItem in categoryItem.dishList" :dish="dishItem" :key="dishItem.id" /> </div> <div style="height: 100px"></div> </scroll-view> js代码如下 setup(props) { let dishScroll = useThrottleFn((e) => { let { categoryScrollTops } = getApp().globalData; let { scrollTop } = e.detail; //处理banner部分的高度 if (unref(ptActivityInfo.id) || unref(fanpiaoList).length ) { scrollTop -= (4 + (screenWidth) * 0.2086 - 22.5); } let categoryIndex = scrollTop < 0 ? 0 : categoryScrollTops.findIndex((item) => item > scrollTop) - 1; if (!categoryIsClick) { categoryActiveIndex.value = categoryIndex; scrollIntoCategoryView.value = `category-index-${(categoryIndex - 3 )< 0 ? 0 : categoryIndex }`; } }, 100); function changeCategory(index) { categoryActiveIndex.value = index; scrollIntoView.value = "category-view-" + index; categoryIsClick = true; setTimeout(()=>{ categoryIsClick=false },1000) } watch(props.dishList, (nval) => { setTimeout(() => { categoryActiveIndex.value = 0; }, 2000); }); return { categoryActiveIndex, scrollIntoView, scrollIntoCategoryView, dishScroll, changeCategory }; }, }; </script> [图片]

1. 减少不必要的 setData 可以消除 data 变化导致的闪烁现象 2. 使用普通 image 代替 cover-image 、普通 view 代替 cover-view 可以减弱由于 cover 组件创建偏慢导致的闪烁现象（但要注意组件层叠层级） 但 android 本身的的渲染延迟仍然会导致一部分闪烁现象