【报Bug】uniapp开发小程序页面真机渲染卡顿

示例代码：

列表页面

    <view class="ranking-home bg-white" :class="title == '心理测评榜' ? 'img1' : title == '免费测评榜' ? 'img2' : '' ">  
        <view class="bg1"></view>  
        <view class="bg2"></view>  
        <view class="bg-title">  
            <view class="name">{{ title }} TOP30</view>  
            <view class="label">HOT LIST</view>  
        </view>  
        <view class="app-index list-box">  
            <view class="app-loader mt25" v-if="!pageData.list">  
                <view class="loader"></view>  
            </view>  
            <view v-else class="app-container_main mt25">  
                <!-- v-for 循环放在这里 -->  
                <view v-for="(item, index) in pageData.list" :key="index">  
                    <ranking-card :item="item" :index="index"></ranking-card>  
                </view>  
                <view class="app-loader" v-if="pageData.list.length > 0">  
                    <view class="loader" v-if="pageData.loading"></view>  
                    <view class="load" v-else>已经到底了</view>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script setup>  
    import {  
        ref  
    } from 'vue';  
    import {  
        request  
    } from '@/apis/request.js';  
    import {  
        onLoad,  
        onReachBottom  
    } from '@dcloudio/uni-app';  

    import rankingCard from '@/components/ranking-card.vue';  

    const title = ref('');  
    const pageData = ref({  
        url: '',  
        list: null,  
        typeId: '',  
        limit: 10,  
        page: 1,  
        recommend: 1,  
        isHot: 1,  
        loading: true,  
    });  

    const getContentlist = async (e) => {  
        if (e) {  
            pageData.value.list = null;  
            pageData.value.page = 1;  
            pageData.value.loading = true;  
        }  

        const data = {  
            typeId: pageData.value.typeId,  
            limit: pageData.value.limit,  
            recommend: pageData.value.recommend,  
            isHot: pageData.value.isHot,  
            page: pageData.value.page,  
        };  
        try {  
            const response = await request(pageData.value.url, data);  
            if (e) {  
                pageData.value.list = response.page.list;  
            } else {  
                pageData.value.list = [...pageData.value.list, ...response.page.list];  
            }  

            if (pageData.value.page >= response.page.totalPage || pageData.value.page >= 3) {  
                pageData.value.loading = false;  
            } else {  
                pageData.value.page += 1;  
            }  
        } catch (error) {  
            console.error('Failed to fetch data:', error);  
            pageData.value.loading = false;  
        }  
    };  

    onLoad(async (option) => {  
        switch (option.type) {  
            case 'article':  
                uni.setNavigationBarTitle({  
                    title: '热门文章'  
                });  
                title.value = '心理宝典榜';  
                pageData.value.url = '/wap/getContentlist';  
                break;  
            case 'free':  
                uni.setNavigationBarTitle({  
                    title: '免费测评'  
                });  
                title.value = '免费测评榜';  
                pageData.value.url = '/wap/getEvaluationList';  
                pageData.value.typeId = -1;  
                pageData.value.recommend = 0;  
                break;  
            default:  
                uni.setNavigationBarTitle({  
                    title: '推荐测评'  
                });  
                title.value = '心理测评榜';  
                pageData.value.url = '/wap/getEvaluationList';  
        }  

        await getContentlist(true);  
    });  

    onReachBottom(() => {  
        if (pageData.value.loading) {  
            getContentlist();  
        }  
    });  
</script>

组件页面

<template>  
  <view class="article-card_container">  
    <view class="article-card app-hover" @click="onContent(item.contentType ? '/pages/article/content/content?id=' + item.id : '/pages/test/content/content?id=' + item.id)">  
      <view class="img">  
        <image class="icon" mode="aspectFill" :src="item.thumbnail || item.img"></image>  
        <view class="type" v-if="item.contentType || item.typeName">  
          {{ item.contentType || item.typeName }}  
        </view>  
       <view class="index" :class="index === 0 ? 'on1' : index === 1 ? 'on2' : index === 2 ? 'on3' : '' ">{{index + 1}}</view>  
      </view>  
      <view class="main">  
        <view class="title">{{ item.title }}</view>  
        <view class="summary">{{ item.summary }}</view>  
        <view class="foot" v-if="item.contentType">{{ item.author }}</view>  
        <view class="foot" v-else>  
          <view class="price" v-if="item.price * 1 > 0"><text>￥</text>{{ item.price }}</view>  
          <view class="free" v-else>免费</view>  
          <view class="init" v-if="item.initPrice"><text>￥</text>{{ item.initPrice }}</view>  
          <view class="btn">立即测试</view>  
        </view>  
      </view>  
    </view>  
  </view>  
</template>  

<script setup>  
import appEmpty from './app-empty.vue';  

const props = defineProps({  
  item: {  
    type: Object,  
    required: true,  
  },  
  index: {  
    type: Number,  
    required: true,  
  },  
});  

const onContent = (url) => {  
  uni.navigateTo({ url });  
};  
</script>

操作步骤：

目前我尝试了，微信小程序、抖音小程序真机渲染页面卡顿。
给图片添加 lazy-load 属性也试过了，没用。
也不可能是我图片太大的原因，因为这些都是测试数据，我找了几张小的图片测试的。

预期结果：

顺畅浏览

实际结果：

卡顿卡成PPT了