uni-app列表页面数据加载过多时报Dom limit exceeded错误提示

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app列表页面数据加载过多时报Dom limit exceeded错误提示

问题描述

应该是数据过多页面上dom节点太多了，应该是一种限制，怎么解决这种情况呢，希望可以无限制得往下添加。能不能有其他方法。求解，在线等 急急急急急急！！！！！


| 信息类型 | 描述 |
| --- | --- |
| 无 | 无相关信息 |
Harmonyos Next教程
3 回复

哪个平台报的？ uni-app自身没有这种限制，应该是某个小程序平台自身的限制。 是不是一个list里面太多组件了？减少下单位行里的组件数量。


是的，项目是一个电商app需要很多dom

针对你在uni-app中遇到的“Dom limit exceeded”错误提示，这通常是由于页面渲染了过多的DOM节点导致的。在开发过程中，尤其是处理列表页面时，需要特别注意性能和内存的管理。以下是一些优化方法，通过代码示例来展示如何避免这一错误。

1. 使用分页加载数据

通过分页加载数据，可以减少一次性渲染的DOM节点数量。假设你有一个API可以分页获取数据，可以这样做：

data() {
    return {
        currentPage: 1,
        pageSize: 20,
        list: []
    };
},
methods: {
    loadMore() {
        uni.request({
            url: 'https://your-api-endpoint.com/data',
            data: {
                page: this.currentPage,
                size: this.pageSize
            },
            success: (res) => {
                this.list = this.list.concat(res.data.list);
                this.currentPage++;
            }
        });
    },
    onLoad() {
        this.loadMore();
    }
}

在模板中，可以使用v-for来渲染列表：

<view>
    <scroll-view scroll-y="true" style="height: 100vh;">
        <view v-for="(item, index) in list" :key="index">
            <!-- 列表项内容 -->
        </view>
    </scroll-view>
    <button @click="loadMore">加载更多</button>
</view>

2. 使用虚拟滚动

对于需要展示大量数据的列表，可以使用虚拟滚动技术，只渲染当前可视区域内的DOM节点。可以使用第三方库如better-scroll或者vue-virtual-scroll-list。

以下是一个使用vue-virtual-scroll-list的示例：

import VirtualList from 'vue-virtual-scroll-list';

export default {
    components: {
        VirtualList
    },
    data() {
        return {
            items: [] // 假设已经加载了所有数据
        };
    },
    onLoad() {
        // 加载数据
    }
};

模板中使用VirtualList：

<virtual-list :size="50" :remain="10" :data-key="'id'" :data-sources="items">
    <template slot-scope="{ item }">
        <view>
            <!-- 列表项内容 -->
        </view>
    </template>
</virtual-list>

总结

通过上述方法，可以有效减少DOM节点的数量，避免“Dom limit exceeded”错误。分页加载适合数据量较大但用户不会一次性浏览完所有数据的场景；虚拟滚动则适用于需要展示大量数据且用户会滚动浏览的场景。根据实际需求选择合适的方法进行优化。

回到顶部