V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
123s
V2EX  ›  JavaScript

前端异步加载分页数据,怎么优雅展现

  •  1
     
  •   123s · 2016-05-23 16:06:59 +08:00 · 3465 次点击
    这是一个创建于 3088 天前的主题,其中的信息可能已经有所发展或是发生改变。
    分页是前端做的,我一次 load20 条数据,先展示 10 条,到底部再加 10 条。问题来了,怎么让页面不会抖一下呢?
    21 条回复    2016-05-23 17:23:19 +08:00
    morning
        1
    morning  
       2016-05-23 16:18:50 +08:00
    murmur
        2
    murmur  
       2016-05-23 16:21:33 +08:00
    抖一下是什么 你没用 append 直接清除原来的行然后重绘么?
    123s
        3
    123s  
    OP
       2016-05-23 16:25:44 +08:00
    @murmur 我是 append 进去,原来的没有清除啊
    123s
        4
    123s  
    OP
       2016-05-23 16:26:07 +08:00
    @morning 额,不用插件
    rekulas
        5
    rekulas  
       2016-05-23 16:26:31 +08:00
    append 元素页面不会发生抖动的,只有滚动条位置会重置下,发生抖动应该是代码有问题,排除 bug 即可
    123s
        6
    123s  
    OP
       2016-05-23 16:26:39 +08:00
    @murmur 是高度增加了,所以感觉滚动条会动一下
    123s
        7
    123s  
    OP
       2016-05-23 16:27:46 +08:00
    @rekulas 滚动条也几乎在原来的位置,抖得不明显,只是有强迫症。有没有办法完全不动?
    123s
        8
    123s  
    OP
       2016-05-23 16:28:47 +08:00
    @rekulas 可能我说得不清,没有抖,是动了一下。
    ziki
        9
    ziki  
       2016-05-23 16:28:56 +08:00
    @123s 滚动条变短这个你破不了吧
    loading
        10
    loading  
       2016-05-23 16:35:51 +08:00 via Android
    是第一次没有滚动条,然后 20 条出现了滚动条导致页面变窄?
    rekulas
        11
    rekulas  
       2016-05-23 16:35:56 +08:00
    @123s 没明白你的意思 高度增加了滚动条位置肯定要变的 为什么要让它不动?
    123s
        12
    123s  
    OP
       2016-05-23 16:38:33 +08:00
    @rekulas 好吧。是我多想了,不可能不变短的。
    @ziki
    rekulas
        13
    rekulas  
       2016-05-23 16:41:22 +08:00
    @123s 你如果觉得突然变化无法接受那只能自己实现滚动条,屏蔽浏览器自己的滚动条,然后借助滚动条插件来实现,可以位置渐变视觉效果不错,不过个人感觉对大部分人来说这个意识不大
    123s
        14
    123s  
    OP
       2016-05-23 16:43:06 +08:00
    @rekulas 我猜是在滚动下去的时候,有一个速度。这时再插东西就会改变。好吧,反正不是太明显,就这样算了。
    BOYPT
        15
    BOYPT  
       2016-05-23 16:49:18 +08:00
    去 twitter 看看就知道了
    123s
        16
    123s  
    OP
       2016-05-23 17:11:58 +08:00
    @BOYPT 对,就是这种效果。我怎么看不出来
    BOYPT
        17
    BOYPT  
       2016-05-23 17:16:24 +08:00
    @123s twitter 的是靠近底部就更新吧?
    我也实现过类似的功能,更新时候页面没有动:

    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { xxxxxx }
    123s
        18
    123s  
    OP
       2016-05-23 17:19:51 +08:00
    @BOYPT 我也是这样的。
    BOYPT
        19
    BOYPT  
       2016-05-23 17:21:36 +08:00
    @123s 那要不你改成插入到 dom 后是 display:none 的,然后用个 slideDown 慢慢放出来看看是哪里抖动了
    123s
        20
    123s  
    OP
       2016-05-23 17:22:46 +08:00
    123s
        21
    123s  
    OP
       2016-05-23 17:23:19 +08:00
    @123s 手抖,我看其他浏览器好像没问题。 mac 下的 chrome 有点抖,不是很明显。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5634 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 07:30 · PVG 15:30 · LAX 23:30 · JFK 02:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.