在Framework7中显示/隐藏页面加载时的预加载器

Question

我想在页面加载时显示所有内容的预加载器，并在页面加载完成时隐藏它并显示内容（我不是在谈论内部链接 - 就像在浏览器中键入地址并等待要加载的页面。）像这个演示： https ： //demo.app-framework.com/

我试过这个：

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',

    on: {
        init: function () {
            console.log('App initialized');
        },
        pageInit: function () {
            console.log('Page initialized');
            app.preloader.hide();
        },
    }
  // ... other parameters
});

var mainView = app.views.create('.view-main');
app.preloader.show();

但它不起作用它像其他元素一样显示加载器并且不隐藏它，我不确定它是否可能。 如果有人能指出我正确的方向，我将不胜感激。

Answer 1

页面上的文档有一个关于页面事件的部分。 https://framework7.io/docs/page.html#page-name

使用app.preloader.show(); 在早期事件中，使用app.preloader.hide(); 当你想要它被删除。

    pageBeforeIn: function (e, page) {
        app.preloader.show();
    },
    pageAfterIn: function (e, page) {
        app.preloader.hide();
    },

Answer 2

那是因为在pageInit事件中你指的是一个在你调用时没有初始化的变量（var app），请找到有用的代码片段。

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',

    on: {
        init: function () {
            console.log('App initialized');
        },
        pageInit: function () {
            console.log('Page initialized');
            //app.preloader.hide(); //app is not yet initialized this will return an undefined error.
        },
    }
  // ... other parameters
});

var mainView = app.views.create('.view-main');
app.preloader.show(); //var app is initialized by now
app.on('pageInit', function (page) {
  console.log('Page is now initialized');
  app.preloader.hide();
});