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

完善虚拟列表的措辞

上级 37928b42
...@@ -1274,7 +1274,7 @@ ...@@ -1274,7 +1274,7 @@
{ {
"path" : "pages/template/custom-long-list/custom-long-list", "path" : "pages/template/custom-long-list/custom-long-list",
"style" : { "style" : {
"navigationBarTitleText" : "自行实现长列表组件", "navigationBarTitleText" : "自定义虚拟长列表",
"enablePullDownRefresh" : false "enablePullDownRefresh" : false
} }
} }
......
...@@ -78,7 +78,8 @@ ...@@ -78,7 +78,8 @@
const fileManager = uni.getFileSystemManager() const fileManager = uni.getFileSystemManager()
fileManager.stat({ 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, recursive: this.recursiveVal,
success: (res : StatSuccessResult) => { success: (res : StatSuccessResult) => {
if (this.logAble) { if (this.logAble) {
......
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
{ {
id: 'custom-long-list', id: 'custom-long-list',
url: 'custom-long-list', url: 'custom-long-list',
name: '自行实现长列表组件', name: '自定义虚拟长列表',
open: false, open: false,
pages: [] as Page[], pages: [] as Page[],
}, },
......
<template> <template>
<view style="flex: 1;background-color: aliceblue;"> <view style="flex: 1;background-color: aliceblue;">
<page-head :title="title"></page-head> <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"> <custom-list-view style="flex: 1;" :list="list" @scrolltoupper="scrolltoupper" @scroll="scroll">
<template v-slot:default="{items}"> <template v-slot:default="{items}">
<custom-list-item class="item" v-for="item in (items as Item[])" :item="item" :key="item.id"> <custom-list-item class="item" v-for="item in (items as Item[])" :item="item" :key="item.id">
...@@ -71,4 +72,4 @@ ...@@ -71,4 +72,4 @@
border-radius: 5px; border-radius: 5px;
background-color: white; background-color: white;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册