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

Show / hide preloader on page load in Framework7

我想在页面加载时显示所有内容的预加载器,并在页面加载完成时隐藏它并显示内容(我不是在谈论内部链接 - 就像你在浏览器并等待页面加载。) 喜欢这个演示: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();

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

Page 上的文档中有一节是关于 Page Events 的。 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();
    },

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