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