V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Seita
V2EX  ›  Vue.js

Vue 2.0 无限下拉组件

  •  1
     
  •   Seita ·
    egoist · 2016-10-22 12:44:21 +08:00 · 10653 次点击
    这是一个创建于 2958 天前的主题,其中的信息可能已经有所发展或是发生改变。
    9 条回复    2017-05-11 20:56:45 +08:00
    RoundCat
        1
    RoundCat  
       2016-10-22 14:22:33 +08:00 via Android
    不错,不过这让我想起了某度的首页😓😓😓
    Kaiyuan
        2
    Kaiyuan  
       2016-10-22 16:08:26 +08:00   ❤️ 1
    无限下拉是一个体验极差的模式,手机上内存不足会自动刷新,然后就又在重新加载最开始的位置。
    然而为什么那么多网页和 Apps 会用?
    Seita
        3
    Seita  
    OP
       2016-10-22 16:18:16 +08:00
    @Kaiyuan 很明显,利大于弊
    doubleflower
        4
    doubleflower  
       2016-10-22 16:37:16 +08:00
    @Kaiyuan 那是没实现好,前面的可以回收,特别是大图片。
    Kaiyuan
        5
    Kaiyuan  
       2016-10-22 16:56:10 +08:00
    @Seita 如果只是加载几页的内容是利大于弊,但是如果是内容归档需要加载超过十页的内容就是一种鸡肋。例如豆瓣东西、 Flickr 这些网站居然都是用无限加载,我 16G 内存用 Chrome 都经常卡的不行。
    bertonzh
        6
    bertonzh  
       2016-10-22 22:59:42 +08:00
    我所理解的 Infinity 组件是滚动到下面时,顶部的会自动回收,滚动到上面时,上面的重新 render ,下面的被回收。
    Seita
        7
    Seita  
    OP
       2016-10-23 09:55:08 +08:00 via Android
    @bertonzh 什么叫回收……
    bertonzh
        8
    bertonzh  
       2016-10-23 16:44:57 +08:00
    @Seita 你看看 https://github.com/airbnb/infinity ,就算 data 里面有 1w 条,实际渲染到 DOM 的始终不会超过 100 条。这样渲染大量列表也不会卡。
    speak123
        9
    speak123  
       2017-05-11 20:56:45 +08:00
    将 2d transform 换成 3d 就可以强制开启 GPU 加速 提高动画性能 /div { transform: translate(10px, 10px);}div { transform: translate3d(10px, 10px, 0); 也可以增加性能。iscroll.js 就是这么做的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1030 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 20:45 · PVG 04:45 · LAX 12:45 · JFK 15:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.