在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

那是因为在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();
});