594mantou

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

  •  
  •   594mantou ·
    mantou132 · Dec 19, 2023 · 1454 views
    This topic created in 900 days ago, the information mentioned may be changed or developed.

    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

    缺点:

    • 大步(比如拖动滚动条)滚动时节流渲染
    • 往前加载数据后会闪一下(因为会滚动一次)
    • 测试没搞全
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   899 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 22:37 · PVG 06:37 · LAX 15:37 · JFK 18:37
    ♥ Do have faith in what you're doing.