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

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();
    },

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();
});

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

2 个答案: