Показать / скрыть предварительный загрузчик при загрузке страницы в Framework7 - PullRequest
Новая
       12

Показать / скрыть предварительный загрузчик при загрузке страницы в Framework7

0 голосов
/ 18 мая 2018

Я хочу показать предварительный загрузчик для всего содержимого, когда страница загружается, и скрыть его, когда загрузка страницы завершена, и показать содержимое (я не говорю о внутренних ссылках, например, когда вы вводите адрес в браузереи ожидаю загрузки страницы.) Как это демо: 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();

Но этоне работает, показывает загрузчик как другие элементы и не скрывает его, я не уверен, что это возможно.Буду признателен, если кто-нибудь укажет мне правильное направление.

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Это потому, что в событии 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();
});
0 голосов
/ 22 мая 2018

Документы на странице имеют раздел о событиях страницы.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();
    },
...