首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

[请教] 有谁知道 https://selfstore.io 中随便点一个链接后、窗口顶部会有一个红色进度条出现、然后再跳转页面的效果是如何实现的?

  •  1
     
  •   hustlzp · 2015-04-20 16:15:35 +08:00 · 4298 次点击
    这是一个创建于 1613 天前的主题,其中的信息可能已经有所发展或是发生改变。
    不知道表达清楚没有...

    感觉这个效果体验蛮好的,不过琢磨半天也不知道怎么实现...

    @chloerei 能解释下吗?

    是不是利用 Ruby on Rails 框架本身的特性实现的?
    27 回复  |  直到 2015-04-21 17:44:00 +08:00
        1
    moliliang   2015-04-20 16:21:31 +08:00   ♥ 1
    turbolinks
        3
    no13bus   2015-04-20 16:23:22 +08:00
        4
    thcode   2015-04-20 16:24:28 +08:00   ♥ 1
    http://instantclick.io/
    你可以参考一下这个代码中的 progress bar
        5
    chloerei   2015-04-20 16:25:09 +08:00   ♥ 3
    现在用的是 Turbolinks 自带的进度条,Turbolinks 是 Rails 框架默认的组件。

    非 Turbolinks 应用可以看这个 https://github.com/rstacruz/nprogress/ ,要注意只有在 AJAX 更新的时候才有作用。
        6
    faceair   2015-04-20 16:25:33 +08:00   ♥ 1
    nprogress
        7
    hustlzp   2015-04-20 16:26:51 +08:00
    @moliliang
    @no13bus
    @thcode
    @chloerei
    @faceair

    谢谢各位,涨姿势了!
        8
    cj941030   2015-04-20 16:33:30 +08:00   ♥ 1
        9
    icyflash   2015-04-20 16:35:14 +08:00 via Android   ♥ 1
    nprogress + pjax
        10
    oott123   2015-04-20 17:00:50 +08:00   ♥ 1
    其实你可以考虑一下 InstantClick ……
        11
    daben1990   2015-04-20 17:47:48 +08:00
    效果真的不错,打算下次页面用下
        12
    r00tt   2015-04-20 19:30:56 +08:00 via Android   ♥ 1
    有个gem nprogress.
        14
    lincanbin   2015-04-20 20:52:12 +08:00 via Android
    pjax加个进度条。
    实际上就是Ajax并在回调后修改地址栏和历史记录。
    理解了这一点,做进度条就非常容易了。
        15
    ChiangDi   2015-04-20 20:54:04 +08:00
    但是我感觉这个进度条是纯骗人的,连不上的时候它也会慢慢的前进。
        16
    0x142857   2015-04-20 21:10:35 +08:00
    pace
    pace
    pace
        17
    virusdefender   2015-04-20 21:35:22 +08:00   ♥ 1
    amazeui就有这个工具 http://amazeui.org/javascript/nprogress
        18
    hustlzp   2015-04-20 22:13:48 +08:00
    @ChiangDi 恩,是的...
        19
    hustlzp   2015-04-20 22:15:25 +08:00
    @virusdefender wow, cool!
        20
    gkiwi   2015-04-20 22:19:22 +08:00
    @ChiangDi 主要是用户心理/体验上的一些原因.毕竟,ajax或者点开网页后没有任何动态变化,人就容易焦虑..
        21
    dallaslu   2015-04-21 00:02:34 +08:00
    是 pjax 嘛?
        22
    endoffight   2015-04-21 08:40:26 +08:00 via Android
    油管也有这种效果
        23
    SharkIng   2015-04-21 08:45:54 +08:00
    搭车问下PHP里面(如CI,Laravel框架)有没有类似的组件?
        24
    cxe2v   2015-04-21 08:55:47 +08:00
    淘宝不就是换上了这个效果么?
        25
    hustlzp   2015-04-21 09:41:49 +08:00
    @dallaslu 应该是的。
        26
    SmiteChow   2015-04-21 12:02:08 +08:00
    pjax
        27
    jyz19880823   2015-04-21 17:44:00 +08:00
    最早是 youtube, 然后是 ruby-china
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3353 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 26ms · UTC 05:15 · PVG 13:15 · LAX 22:15 · JFK 01:15
    ♥ Do have faith in what you're doing.