提交 5557d664 编写于 作者: W wanganxp

完善虚拟列表的措辞

上级 37928b42
......@@ -1274,7 +1274,7 @@
{
"path" : "pages/template/custom-long-list/custom-long-list",
"style" : {
"navigationBarTitleText" : "自行实现长列表组件",
"navigationBarTitleText" : "自定义虚拟长列表",
"enablePullDownRefresh" : false
}
}
......
......@@ -78,7 +78,8 @@
const fileManager = uni.getFileSystemManager()
fileManager.stat({
path: `${this.basePath}${this.statFile}`,
// path: `${this.basePath}${this.statFile}`, //USER_DATA_PATH
path: `${this.globalTempPath}${this.statFile}`, //CACHE_PATH
recursive: this.recursiveVal,
success: (res : StatSuccessResult) => {
if (this.logAble) {
......
......@@ -113,7 +113,7 @@
{
id: 'custom-long-list',
url: 'custom-long-list',
name: '自行实现长列表组件',
name: '自定义虚拟长列表',
open: false,
pages: [] as Page[],
},
......
<template>
<view style="flex: 1;background-color: aliceblue;">
<page-head :title="title"></page-head>
<view class="tips">使用部分渲染优化列表初始元素较多时加载卡顿的问题,此示例中仅渲染滚动容器上下5屏的内容。适用于仅使用一个for循环创建所有列表项的场景。</view>
<view class="tips">list-view组件虽然在UI层有recycle机制,但长列表的vnode太多也会造成初始化卡顿。本组件仅创建部分vnode,而未使用list-view,也就是UI层其实是短列表。
此示例中仅渲染滚动容器上下5屏的内容。适用于仅使用一个for循环创建所有列表项的场景。</view>
<custom-list-view style="flex: 1;" :list="list" @scrolltoupper="scrolltoupper" @scroll="scroll">
<template v-slot:default="{items}">
<custom-list-item class="item" v-for="item in (items as Item[])" :item="item" :key="item.id">
......@@ -71,4 +72,4 @@
border-radius: 5px;
background-color: white;
}
</style>
\ No newline at end of file
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册