展示HN：一个JavaScript库，可以将任何列表转换为平滑的任意形状选择器
嘿，HN！这是我独自完成的项目。<p>你可以在这里查看：<a href="https://loopem.tahazsh.com/" rel="nofollow">https://loopem.tahazsh.com/</a><p>这个想法在我脑海中盘旋了很长时间。我一直在思考如何将选择器的概念转化为一个数学问题，能够描述我想要的布局，并且它能顺利运行。<p>这里所说的选择器，指的是类似于 HTML 中 `<select>` 的功能，但包含更多的视觉元素，无论是图片、图标、颜色，还是任何能够提升用户体验的东西。<p>举个例子，假设你有一个电子商务应用程序，展示产品的不同颜色选项。与其列出蓝色、红色等，不如直接展示实际颜色，用户可以拖动或滑动浏览这些颜色。<p>为了证明这个想法可行，并提供开箱即用的选项，我添加了内置布局：线性、弧形、轮盘、封面流、扇形和堆叠。<p>我还确保它在处理任意数量的项目时依然流畅。由于我对列表进行了虚拟化，所以它只渲染屏幕上显示的内容，因此速度依然很快。<p>无障碍功能也是默认开启的。支持方向键、Home 和 End 键，具有列表框角色，支持屏幕阅读器。此外，它还声明了一个手势轴，因此在移动设备上，水平选择器不会干扰你的垂直页面滚动。<p>我知道文档对开发工具非常重要，所以我花了不少时间使其简洁易懂。每个选项都有一个实时选择器，你可以在阅读时拖动它。<p>这个项目是 MIT 许可证，没有依赖，兼容 React、Vue、Svelte 或者完全不使用框架。<p>我很期待反馈！谢谢！
查看原文
Hey HN! I built this solo.<p>You can check it out here: <a href="https://loopem.tahazsh.com/" rel="nofollow">https://loopem.tahazsh.com/</a><p>This idea had been lingering in my head for a long time. I kept thinking about the best way to turn the idea of a picker into a math problem, where I could describe the layout I want and it would just work.<p>By pickers, I mean something like what `<select>` does in HTML, but with more visual items, whether they are images, icons, colors, or anything that would enhance the user experience.<p>For example, say you have an e-commerce app that shows different color options for a product. Instead of listing blue, red, and so on, you can show the actual colors, and users can drag or flick through them.<p>To prove it works, and to give you usable options out of the box, I added built-in layouts: line, arc, wheel, cover flow, fan, and stack.<p>I also made sure it stays smooth with any number of items. It's still fast because I virtualized the list, so it only renders what's on screen.<p>Accessibility is on by default too. Arrow keys, Home and End, listbox roles, screen reader support. It also claims one gesture axis, so a horizontal picker never eats your vertical page scroll on mobile.<p>I know docs matter a lot for dev tools, so I spent a good amount of time making them clean and easy to follow. Every option has a live picker you can drag while you read about it.<p>It's MIT, has no dependencies, and works with React, Vue, Svelte, or no framework at all.<p>I'd love feedback! Thanks!