Question

我正在使用流路由器加载数据网格，但是当我查看页面时，页脚总是在数据加载之前闪烁到顶部。解决这个问题的最佳方法是什么？

这是路线：

AdminRoutes.route('/dashboard', {
  name: 'adminDashboard',
  action() {
    BlazeLayout.render('AppLayout', {page: 'AdminDashboard'});
  }
});

这是js文件：

import { Template } from 'meteor/templating'
import Stores from '../../../../api/stores/stores.js'

import './AdminDashboard.html'

Template.AdminDashboard.onCreated(function() {
  var self = this;
  self.autorun(function() {
    self.subscribe('stores.names.links');
  });
});

Template.AdminDashboard.helpers({
  stores: function () {
    return Stores.find();
  }
});

这是html布局文件：

<template name='AppLayout'>

  {{#if Template.subscriptionsReady}}

    {{> Header }}

    {{> Template.dynamic template=page}}

    {{> Footer }}

  {{/if}}

</template>

这是仪表板html文件：

<template name='AdminDashboard'>
  <div class='admin-dashboard-page'>

    <section class='stores-grid'>
      {{#each stores}}
        <div class='store'>
          <h2 class='store-name'>{{name}}</h2>
          <a href='/admin/dashboard/{{link}}' class='store-button'>Edit</a>
        </div>
      {{/each}}
    </section>

  </div>
</template>

Answer 1

我尝试在.stores-grid加载后显示页脚。使用在加载数据时设置为true的处理程序创建一个reactiveVar，并在帮助程序上返回它的值，然后将页脚包装在模板的if块中。

这将是以下内容......

首先创建一个值为false的reactiveVar：

Template.AdminDashboard.onCreated(function() {
  this.isDataLoaded = new ReactiveVar(false);
  var self = this;
  self.autorun(function() {
  self.subscribe('stores.names.links');
  });
});

加载集合时将值设置为true：

Template.AdminDashboard.helpers({
  stores: function () {
    let data = Stores.find() 
    if(data) {
        Template.Instance().isDataLoaded.set(true)
      }
    return data ;
  },  

  dataLoaded: function () {
    return Template.Instance().isDataLoaded.get();
  }
});

最后，请将页脚包起来，使其仅在加载数据后显示：

<template name='AppLayout'>
  {{#if Template.subscriptionsReady}}
    {{> Header }}
    {{> Template.dynamic template=page}}
    {{#if dataLoaded}}
        {{> Footer }}
    {{/if}}
  {{/if}}
</template>

Answer 2

一个简单的解决方法是在div上设置最小高度，将内容加载到内容中，在内容加载时按下页脚。这可能适用于您，也可能不适合您，具体取决于您的内容的预期高度。

您还可以安装加载屏幕/动画以在数据加载时隐藏页脚。

流路由器页脚在数据加载之前闪烁到顶部

2 个答案: