技术理论分析
点击按钮跳转新页面的实现源码如下:
// 获取按钮控件
var btnLogin = document.getElementById('id_login');
// 为按钮添加轻击事件
btnLogin.addEventListener('tap', function(){
var mainView = plus.webview.currentWebview();
var url = 'MainPage.html';
// 定义子页面显示位置样式
var subPageStyle = {
top:'0px',
bottom:'0px'
};
var subView = plus.webview.create(url,url, subPageStyle);
subView.show();
});
代码的核心是:
- 获取当前webview
- 设置子页面显示样式
- 使用 plus.webview.create() 方法创建子页面
- 显示子页面
小白预警:上述代码是写在 mui.plusReady(function(){....}); 中;下面是官方的原话
在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了
mui.plusReady()
方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中。窗口管理 · MUI (dcloud.net.cn)https://dev.dcloud.net.cn/mui/window/https://dev.dcloud.net.cn/mui/window/
根据底部栏切换子页面的示例,可以参见: