TinyVue v3.19.0 正式发布！Tree 组件终于支持虚拟滚动啦！

本文由体验技术团队Kagol原创。
我们非常高兴地宣布，2024年10月28日，TinyVue 发布了 v3.19.0 。

本次 3.19.0 版本主要有以下重大变更：

• 所有组件全面升级到 OpenTiny Design 新设计规范，UI 更美观、更符合现代审美。
• 增加 VirtualTree 虚拟树组件。
• 增加 VirtualScrollBox 虚拟化容器组件。
• 增加 Sticky 粘性布局组件。

详细的 Release Notes 请参考：https://github.com/opentiny/tiny-vue/releases/tag/v3.19.0

本次版本共有16位贡献者参与开发，其中 Nowitzki41 / Simon-He95 / BWrong 是新朋友

• Nowitzki41 - 新增贡献者✨
• Simon-He95 - 新增贡献者✨
• BWrong - 新增贡献者✨
• shenjunjian
• kagol
• zzcr
• gimmyhehe
• GaoNeng-wWw
• wuyiping0628
• gweesin
• James-9696
• chenxi-20
• MomoPoppy
• AcWrong02
• Davont
• Youyou-smiles

也感谢新老朋友们对 TinyVue 的辛苦付出！
你可以更新 @opentiny/[email protected] 进行体验！

我们一起来看看都有哪些更新吧！

全面升级新 UI，更符合现代审美

自从 TinyVue 组件库去年开源以来，一直有小伙伴反馈我们的 UI 不够美观，风格陈旧，不太满足现阶段审美。

于是我们花了大量时间对组件 UI 进行优化，全面适配了 OpenTiny Design 新设计规范，并终于在 v3.19.0 正式发布！

整体效果如下：

如果你安装 v3.19.0 版本的 TinyVue 组件库，默认效果就是新设计规范。

# 安装依赖
npm i @opentiny/[email protected]

效果图：

新旧 UI 的效果对比，可以阅读以下文章：

• 焕然一新！TinyVue 组件库 UI 大升级，更符合现代的审美！

增加 VirtualTree 虚拟树组件

说到 Tree 组件的虚拟滚动，还要回到2023年7月12日开发者 zouzhixiang 提交的一个 issue：✨ [Feature]: tree树形控件能增加虚拟滚动功能吗？#317。

现在 Tree 组件终于支持上虚拟滚动功能了！

我们一起来体验下吧！

只需要配置下数据源和高度即可。

效果如下：

虚拟树也可以结合 VirtualScrollBox + Tree 组件进行实现，具体代码可以参考以下链接：

https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/v...

更多 VirtualScrollBox 组件的功能，欢迎到 TinyVue 官网进行体验：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/v...

增加 Sticky 粘性布局组件

Sticky 组件与 CSS 中 position: sticky 属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

“吸顶”效果在某些场景下能够有效提升网页的可用性和用户体验。
1、导航栏：Sticky 组件常用于固定页面顶部的导航栏。当用户滚动页面时，导航栏会保持在视口的顶部，方便用户随时访问其他页面链接。这种设计提升了用户体验，尤其是在内容较长的页面中。
2、文章标题：在长篇文章中，可以将章节标题设置为 Sticky。当用户滚动到该章节时，标题会固定在视口顶部，帮助用户更好地了解当前阅读的位置和内容结构。

使用起来也非常简单，只需要把需要“吸顶”的元素用 Sticky 组件包裹起来就行。

  
TinyVue v3.19.0 正式发布，全面升级到新设计规范，让 UI 更符合现代审美，并增加虚拟树、粘性布局等3个新组件~

默认是“吸顶”的，还可以配置“吸底”，设置偏移量、层级等。

• offset：偏移距离，默认为 0px
• position：吸附位置，可选值有 top(默认) / bottom
• z-index：元素层级，默认为 100

效果如下：

更多 Sticky 组件的功能，欢迎到 TinyVue 官网进行体验：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/s...

关于OpenTiny

OpenTiny官网：https://opentiny.design\
TinyVue 源码：https://github.com/opentiny/tiny-vue （欢迎 Star ⭐）\
TinyEngine 源码：https://github.com/opentiny/tiny-engine （欢迎 Star ⭐）\
B站：https://space.bilibili.com/15284299\
欢迎加入 OpenTiny 开源社区。添加微信小助手 opentiny-official 一起参与交流前端技术～