Framework7获取当前view的辅助函数

Framework7中,使用js来加载新页面可以使用loadPage方法。但是这个方法需要在某个view中调用,例如:

mainView.router.loadPage('about.html');

这里的mainView通常为首页。但有时候页面并不是在首页,这时候可以简单地把mainView换成相应的view,但实际上,常常会遇到不同的view需要加载相同的page的情况。这时候,我们当然希望这个page是在当前的view中加载。查阅了文档后没有发现这样的功能,但是经过对代码的分析,发现当前的view中会有一个active的class,因此有个思路是遍历所有的view。

这里提供一个范例,在我的当前项目中,总共加载了4个view:

var mainView = app.addView('.view-main', {
    dynamicNavbar: true,
});

var safariView = app.addView('.view-safari', {
    dynamicNavbar: true,
});

var settingView = app.addView('.view-setting', {
    dynamicNavbar: true,
});

var cartView = app.addView('.view-cart', {
    dynamicNavbar: true,
});

那么,相对应的辅助函数getCurrentView()如下:

var getCurrentView = function() { 
    if ($$('#tab-feature').hasClass('active')) {
        return mainView;
    }
    if ($$('#tab-safari').hasClass('active')) {
        return safariView;
    }
    if ($$('#tab-setting').hasClass('active')) {
        return settingView;
    }
    if ($$('#tab-cart').hasClass('active')) {
        return cartView;
    }
}

定义了这个函数以后,就可以直接用下面的语句加载Page了:

getCurrentView().router.loadPage('about.html');

有关Framework7的更多信息请移步:http://framework7.io/



发表评论

电子邮件地址不会被公开。 必填项已用*标注