cordova framework7页面初始化事件未触发

ax6ht2ek  于 2023-03-13  发布在  Framework7
关注(0)|答案(5)|浏览(208)

我正在尝试使用framework7,但无法触发page init事件。我使用的代码非常简单,而且我非常仔细地遵循了the documentation。无论我做什么,它都不会触发(控制台没有记录任何内容,也没有错误)。
我创建了一个pen here showing the problem
我还尝试了回调myApp.onPageInit.nada。
任何帮助都非常感谢。

JS代码

var myApp = new Framework7({});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});
$(document).on('page:init', function (e) {
    alert("processing page init");
});

超文本标记语言

<div class="views">
  <div class="view view-main navbar-through toolbar-through">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">Framework7</div>        
      </div>
    </div>
    <div class="toolbar">
      <div class="toolbar-inner">
        <a href="#" class="link">Left</a>
        <a href="#" class="link">Right</a>
      </div>
    </div>
    <div class="pages">
      <div class="page" data-page="home">
        <div class="page-content">
          <div class="content-block">
            <p>Hi there!</p>            
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
kyks70gy

kyks70gy1#

@SuperDuperApps,我设法运行了代码。非常像Djiggy建议的,如果你延迟初始化,它对我有效(如下)。但如果你不想它在第一页和只有后续页面被调用,那么你的代码工作。只是尝试添加一个链接(到about.html)类似于在文档中的工作

var myApp = new Framework7({
    init: false
});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});
$(document).on('page:init', function (e) {
    alert("processing page init");
});
myApp.init()

注意:PageInit不会在后面调用。

pxy2qtax

pxy2qtax2#

可通过init应用程序手动解决(有时,当内容位于加载的第一个文件中时,不会触发事件)
或尝试触发您的主页回调(第三个链接点)

z6psavjg

z6psavjg3#

详细信息见下页。
https://framework7.io/docs/page.html#page-events
我是这样用的:在应用程序.js中

var app = new Framework7({
    id: 'io.framework7.testapp',
    root: '#app',
    ...
    on: {
        pageInit: function (e, page) {
            console.log('page init -> route.name=' + e.route.name);

            if(e.route.name === "searchPage") {
                app.methods.searchPageInitMethod(e);
            }
        },
    },
    methods: {
        searchPageInitMethod: function (e) {
            console.log("Page Route Params:" + app.views.main.router.currentRoute.params)
        },
    },
    ...
}

我的路由表(routes.js)如下所示:

var routes = [
    ...
    {
        name: "searchPage",
        path: '/search/:keyword/',
        url: './pages/page-search.html',
    },
    ...
];
rqcrx0a6

rqcrx0a64#

从版本3开始,这一点已发生变化。现在,doing the exact same thing可以通过以下操作来实现:

var myApp = new Framework7({
    ...
    init: false
});

myApp.on('init', function(e) {
    alert('app init event fired');
});

myApp.init();
lrl1mhuk

lrl1mhuk5#

您的初始化是完美的,没有问题,但是不要使用alert(),而是尝试myApp.alert(),希望它能工作。

相关问题