Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[组件-下载视频] feat: 引入了虚拟列表来改善列表太长时操作卡顿的问题 #4455

Open
wants to merge 2 commits into
base: preview-features
Choose a base branch
from

Conversation

Asukaaaaaa
Copy link
Contributor

features

  • 新增 VirtualList.vue,将原来 v-for 渲染的列表项放到 VirtualList 下渲染
  • 虚拟列表需要每一项高度一致,所以为 .episode-title 设置了最大宽度 250px,超出时显示省略号
  • 列表加载时通过全局 aid 找到当前页面的剧集项,列表将自动聚焦到当前剧集项并自动选中
  • 修改了原有的自动选中逻辑,剧集数超过 maxCheckedItems = 32 时,将不再自动选择前 32 项

原来的选择器演示,有 1000 个列表项时操作有明显的迟滞感,连续选择多个选项时十分难受

Clipchamp.mp4

使用虚拟列表后

Clipchamp.2.mp4

存在的问题

  • 滚动太快时出现空白区域,用鼠标快速移动滚动条时容易遇到
  • 滚动会使每一个元素显示的数据变化,选中状态变化时对应的选择框会有闪烁现象

@Asukaaaaaa Asukaaaaaa changed the title 在下载视频插件的选择器中引入了虚拟列表来改善列表太长时操作卡顿的问题 [组件-下载视频] feat: 引入了虚拟列表来改善列表太长时操作卡顿的问题 Sep 24, 2023
:data-bvid="item.inputItem.bvid"
@click.native="shiftSelect($event, item, index)"
>
<span class="episode-title">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

限制为 1 行的话, 建议加一个 title, 鼠标停留时可以看到完整标题

@the1812
Copy link
Owner

the1812 commented Nov 2, 2023

使用时 Console 会存在报错 (虽然滚动看起来没什么问题)
Snipaste_2023-11-02_22-48-46

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants