问题描述：如图，点餐小程序，菜品向上滑动时，会同时去更新左侧 菜品分类 的状态。 代码现实见 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>