web-dev-qa-db-ja.com

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

しかし、それは動作しません。他の要素のようにローダーを表示し、それを非表示にしないので、それが可能かどうかはわかりません。誰かが私を正しい方向に向けてくれれば幸いです。

javascripthtml-framework-7
16
hretic

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

ページのドキュメントには、ページイベントに関するセクションがあります。 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();
    },
3
bmrgould