quwei
quwei
  • 发布:2014-10-20 00:07
  • 更新:2015-10-11 10:45
  • 阅读:2195

什么方法能在窗口show到前台时立即执行的?

分类:HTML5+

我用官方例子,预加载了3个webview。但是我切换至一个已经预加载的窗口时,希望立即能重新执行一个函数,应该有什么方法?

mui.plusReady 或 windows.onload 都只是在预加载窗口时就已经执行了。

2014-10-20 00:07 负责人:无 分享
已邀请:
星日

星日

监听webview的showed事件是可以的

DCloud_UNI_CHB

DCloud_UNI_CHB

1、确保窗口是预加载的,且是通过mui.openWindow方法打开的;
2、在目标窗口中,监听pagebeforeshow事件,例如:
{{{
window.addEventListener('pagebeforeshow', function() {
//你的业务代码
});
}}}

quwei

quwei (作者)

官方给的示例代码:

{{{
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 了。

DCloud_UNI_CHB

DCloud_UNI_CHB

你是想监听每个子选项卡页面的显示状态吗?tap点击中不是有activeTab吗?这个就是当前显示的选项卡啊。

quwei

quwei (作者)

不是,我想知道页面show到前台了

比如有个子页面是列表页, 每次切换到列表页我都希望能重新加载列表。需要一个类似 window.addEventListener('pagebeforeshow', function() { 这样的方法。

quwei

quwei (作者)

github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/tab-webview-main.html

现在的问题就是我用了这个示例的代码,创建了多个子页面。

但是每次切换到子页面的时候,我希望能触发一个事件,好让我执行一些初始化操作。最好能有类似 pagebeforeshow 的事件。

DCloud_UNI_CHB

DCloud_UNI_CHB

你可以考虑通过自定义事件处理,参考:http://dcloudio.github.io/mui/javascript/#closewindow

在点击子选项卡时,触发对应选项卡页面的自定义事件,对应选项卡监听该事件,并触发列表重加载。

blj

blj

Webview.show和openwindow什么时候场景上用?他俩区别和使用场景说一下吗?谢谢

该问题目前已经被锁定, 无法添加新回复