Question

调用Turbolinks.visit时有一个进度条。

我想手动显示和隐藏它（因为我的一些xhr请求有点长），是否可能？

（在Turbolinks 3中，有Turbolinks.ProgressBar.start（）;但它不是公共API并且不再工作了）

Answer 1

Turbolinks 5在单例控制器对象中具有更深入的ProgressBar实例。以下应该有效：

function safeStartTurbolinksProgress() {
  if(!Turbolinks.supported) { return; }
  Turbolinks.controller.adapter.progressBar.setValue(0);
  Turbolinks.controller.adapter.progressBar.show();
}

function safeStopTurbolinksProgress() {
  if(!Turbolinks.supported) { return; }
  Turbolinks.controller.adapter.progressBar.hide();
  Turbolinks.controller.adapter.progressBar.setValue(100);
}

Answer 2

你可以在任何时候Turbolinks.ProgressBar.disable()让它消失。或者您甚至可以通过在这些阶段添加类并使用一些CSS魔法来创建自己的进度条。

if Turbolinks.ProgressBar
  // Do stuff

$(document).on 'page:fetch', ->
  // Do stuff while the fetch is starting

$(document).on 'page:receive', ->
    // It's almost done

$(document).on 'page:change', ->
  // It's done

$(document).on 'page:restore', ->
  // It's really done

Answer 3

在Rails 5（Turbolinks 5）中，默认情况下启用进度条。对于任何需要超过500毫秒的页面，它会自动显示。

要完全禁用进度条，请将其可见性样式设置为隐藏：

.turbolinks-progress-bar {
  visibility: hidden;
}

更多信息here。

Turbolinks 5：显示进度栏

3 个答案: