下方有附件可直接下载使用。
页面一
HTML代码
<a class="_button" onclick="go()">Hbuilder</a>
CSS代码
._button{
padding:8px 10px;
background:#f60;
margin:50px auto;
display: block;
width:120px;
text-align:center;
color:#FFFFFF;
border-radius: 3px;
}
JS代码
function plusReady(){
//创建底部图片
issue = new plus.nativeObj.Bitmap('bmp');
issue.load('images/footImg.png',function(){
console.log('图片加载完成!');
createView();
},function(e){
console.log('图片加载失败!'+JSON.stringify(e));
});
}
// 创建原生View控件
function createView(){
view = new plus.nativeObj.View('FootImg',{top:'90%',left:'43%',height:'55px',width:'55px',background:'#f60'});
view.drawBitmap( issue, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
view.show();
view.addEventListener("click",ViewClick, false);
}
//View点击事件
function ViewClick(){
alert('你点击的view');
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
/* 页面切换 */
function go(){
var subpage = mui.openWindow({
url:'list.html',
id:'list.html',
});
//页面转场的时候清除掉view。
subpage.addEventListener('loaded', function() {
subpage.show('slide-in-right', 200, function() {
view.clear();
});
});
}
//监听list返回
window.addEventListener('_title',function(){
//一监听到就可以创建View了,但是View的点击没用(事件应该是绑上了,用createView()的话会发现点击的时候会弹窗两次),应该是位置的问题吧。
view = new plus.nativeObj.View('FootImg',{top:'90%',left:'43%',height:'55px',width:'55px',background:'#f60'});
view.drawBitmap( issue, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
view.show();
// createView(); 这样写的话点击会被执行两次。
//所以等待窗体动画到位在绑定事件
setTimeout(function(){
view.addEventListener("click",ViewClick, false);
},400);
});
页面二
JS代码
$('._back').on('tap',function(){
mui.init({
beforeback: function(){
// var viewPage = plus.webview.getWebviewById('view.html'); //如果不是首页面就用这个获取指定ID,否则用下面的获取首页窗体;
var viewPage = plus.webview.getLaunchWebview();
mui.fire(viewPage,'_title',{/* 这里可以传值 */});
return true;
}
});
mui.back();
})