Show HN：让任何列表变成任意形状的平滑选择器的 JavaScript 库
3 分•作者: tahazsh•大约 1 个月前
大家好！这是我独立开发的。
您可以在这里查看：https://loopem.tahazsh.com/
这个想法在我脑海里盘旋了很久。我一直在思考如何将“选择器”这个概念转化为一个数学问题，这样我就可以描述我想要的布局，然后它就能自动实现。
我所说的“选择器”，是指类似于 HTML 中的 `<select>` 元素，但可以包含更多视觉化元素，无论是图片、图标、颜色，还是任何能提升用户体验的东西。
例如，假设您有一个电商应用，展示产品的不同颜色选项。与其列出蓝色、红色等文字，不如直接展示实际的颜色，用户可以通过拖动或滑动来选择。
为了证明它的可行性，并为您提供开箱即用的可用选项，我添加了内置布局：直线、圆弧、轮子、封面流、扇形和堆叠。
我还确保它能处理任意数量的列表项，并且始终保持流畅。它仍然很快，因为我使用了列表虚拟化技术，只渲染屏幕上可见的元素。
可访问性也是默认开启的。支持箭头键、Home 和 End 键、列表框角色、屏幕阅读器。它还声明了一个手势轴，因此水平选择器在移动设备上不会干扰您的垂直页面滚动。
我知道文档对于开发工具来说非常重要，所以我花了很多时间来制作清晰易懂的文档。每项选项都有一个实时选择器，您可以在阅读文档时进行拖动操作。
它是 MIT 许可，没有依赖项，并且可以与 React、Vue、Svelte 或任何框架一起使用。
非常欢迎您的反馈！谢谢！
查看原文
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!