uni-app开发小程序页面真机渲染卡顿

开发环境	版本号	项目创建方式
Windows	Windows 11	HBuilderX

示例代码：

列表页面

<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">
            <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>

<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>