vue.js - 有没有办法在加载列表之前完全打开 v-dialog?
问题描述
对话框内的列表长度约为 360 个硬币。单击按钮打开对话框后,大约有 2-3 秒的延迟才会显示对话框。这是一个非常糟糕的用户体验,因为它看起来好像按钮不起作用。我希望在对话框可见后加载列表。我曾尝试在 v-list 上使用 v-if="dialog",但它并没有给我带来更好的结果。
现在我想知道,有没有 Vue 或 Vuetify 方法来解决这个问题?
顺便说一句,我对 JS 和 Vue 还很陌生。
这里是相关代码:
<v-dialog v-model="dialog">
<template v-slot:activator="{ on }">
<v-btn v-on="on">Button</v-btn>
</template>
<v-card>
<div height="100%">
<v-list style="overflow-y:hidden">
<v-subheader>Available Coins</v-subheader>
<v-list-item-group color="primary">
<v-list-item
@click="selectCoin(coin)"
v-for="(coin, coinIndex) in filterCoins"
:key="coinIndex"
>
<v-img
style="max-width:30px; border-radius:50%"
:src="coin.logoUrl"
/>
<v-list-item-content>
<v-list-item-title
style="text-transform:uppercase"
v-text="coin.symbol"
/>
</v-list-item-content>
<v-list-item-content>
<v-list-item-title v-text="coin.name" />
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</div>
</v-card>
</v-dialog>
data: () => ({
dialog: false
})
解决方案
对话框不会立即打开是因为您的列表需要时间来呈现。改善用户体验的一个好方法是为对话框添加固定高度并使用 Vuetify 的骨架加载器(https://vuetifyjs.com/en/components/skeleton-loaders)。这些通过带来加载错觉来改善用户体验。
推荐阅读
- java - 自动生成更多 PDF 页面
- javascript - 使用 getSongBPM 时 $.getJSON 不起作用
- php - AWS Lambda 和 Symfony Bref - 部署 Symfony 4 网站
- function - 混合类/对象和函数:代码异味?
- python - 使用一个记录器和多个几乎相同的文件处理程序
- firebase - Firebase 安全规则:允许读取 + 写入除单个集合之外的所有内容
- javascript - JSX 中的多个 If 条件
- python - 有什么理由不使用自动提交吗?
- python - 散景图未嵌入 html
- android - 如何通过自定义 LayoutManager 在 recyclerview 中使用 snapHelper