V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
594mantou
V2EX  ›  前端开发

写了个虚拟列表组件(自定义元素)

  •  
  •   594mantou ·
    mantou132 · 2023-12-19 14:50:20 +08:00 · 718 次点击
    这是一个创建于 365 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Demo: https://pokemon-explorer-orpin.vercel.app/feed2

    功能:

    • 支持向前/后加载数据(上面例子只往前加载一次模拟数据)
    • 支持状态恢复(上面例子中切换路由可以体验,当然持久化保存状态也行)
    • 支持网格

    使用非常简单:

    html`
    <dy-list
      .items=${[0,1,2,3,4,5,6,7,8,9,10]}
      .infinite=${true}
      .getKey=${(item) => item}
      @backward=${...加载数据,修改 items}></dy-list>
    `
    

    上面例子的完整代码也不到 100 行: https://github.com/mantou132/pokemon-explorer/blob/main/src/pages/feed2.ts

    缺点:

    • 大步(比如拖动滚动条)滚动时节流渲染
    • 往前加载数据后会闪一下(因为会滚动一次)
    • 测试没搞全
    594mantou
        1
    594mantou  
    OP
       2023-12-19 15:03:20 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1577 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:54 · PVG 00:54 · LAX 08:54 · JFK 11:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.