官方给的示例代码:
{{{
var subpages = ['list.html','pub.html','person.html'];
var subpage_style = {
top: '0px',
bottom: '50px'
};
//创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for(var i=0; i< 3; i++) {
var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
if(i>0){
sub.hide();
}
self.append(sub);
}
//当前激活选项,默认为第一个;
var activeTab = subpages[0];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
//alert(activeTab +'->'+ targetTab);
if (targetTab == activeTab) {
return;
}
//先隐藏当前的
plus.webview.hide(activeTab);
//再显示目标
plus.webview.show(targetTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
});
}}}
我用这个官方的代码,做了一个固定底部导航的 页面,底部固定,然后有三个选项卡。
但是问题是,每次切换到选项卡我不知道用什么函数可以判断显示状态。 如果按 pagebeforeshow 方法必须是 mui.openWindow 打开的,那么这个方法不行。我试过了。的确没效果。
如果按用 mui.openWindow 方法,重写这个功能:
{{{
var subpages = ['list.html','pub.html','person.html'];
var subpage_style = {
top: '0px',
bottom: '50px'
};
mui.init({
subpages:[
{
url:'list.html',
id:'list.html',
styles:subpage_style
},
{
url:'pub.html',
id:'pub.html',
styles:subpage_style,
show:{autoShow:false}
},
{
url:'person.html',
id:'person.html',
styles:subpage_style,
show:{autoShow:false}
}
]
});
//创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function() {
//当前激活选项,默认为第一个;
var activeTab = subpages[0];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
alert(activeTab +'->'+ targetTab);
if (targetTab == activeTab) {
return;
}
//先隐藏当前的
plus.webview.hide(activeTab);
//再显示目标
plus.webview.show(targetTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
});
}}}
子页面虽然我加了 show:{autoShow:false} 效果,但是还是都显示出来了。
而且我用了plus.webview.show 以后,又监测不到 pagebeforeshow 了。
8 个回复
星日
监听webview的showed事件是可以的
DCloud_UNI_CHB
1、确保窗口是预加载的,且是通过mui.openWindow方法打开的;
2、在目标窗口中,监听pagebeforeshow事件,例如:
{{{
window.addEventListener('pagebeforeshow', function() {
//你的业务代码
});
}}}
quwei (作者)
官方给的示例代码:
{{{
var subpages = ['list.html','pub.html','person.html'];
var subpage_style = {
top: '0px',
bottom: '50px'
};
//创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function() {
}}}
我用这个官方的代码,做了一个固定底部导航的 页面,底部固定,然后有三个选项卡。
但是问题是,每次切换到选项卡我不知道用什么函数可以判断显示状态。 如果按 pagebeforeshow 方法必须是 mui.openWindow 打开的,那么这个方法不行。我试过了。的确没效果。
如果按用 mui.openWindow 方法,重写这个功能:
{{{
var subpages = ['list.html','pub.html','person.html'];
var subpage_style = {
top: '0px',
bottom: '50px'
};
mui.init({
subpages:[
{
url:'list.html',
id:'list.html',
styles:subpage_style
},
{
url:'pub.html',
id:'pub.html',
styles:subpage_style,
show:{autoShow:false}
},
{
url:'person.html',
id:'person.html',
styles:subpage_style,
show:{autoShow:false}
}
]
});
}}}
子页面虽然我加了 show:{autoShow:false} 效果,但是还是都显示出来了。
而且我用了plus.webview.show 以后,又监测不到 pagebeforeshow 了。
DCloud_UNI_CHB
你是想监听每个子选项卡页面的显示状态吗?tap点击中不是有activeTab吗?这个就是当前显示的选项卡啊。
quwei (作者)
不是,我想知道页面show到前台了
比如有个子页面是列表页, 每次切换到列表页我都希望能重新加载列表。需要一个类似 window.addEventListener('pagebeforeshow', function() { 这样的方法。
quwei (作者)
github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/tab-webview-main.html
现在的问题就是我用了这个示例的代码,创建了多个子页面。
但是每次切换到子页面的时候,我希望能触发一个事件,好让我执行一些初始化操作。最好能有类似 pagebeforeshow 的事件。
DCloud_UNI_CHB
你可以考虑通过自定义事件处理,参考:http://dcloudio.github.io/mui/javascript/#closewindow
在点击子选项卡时,触发对应选项卡页面的自定义事件,对应选项卡监听该事件,并触发列表重加载。
blj
Webview.show和openwindow什么时候场景上用?他俩区别和使用场景说一下吗?谢谢