vue+hbuilder监听安卓返回键问题 _HBuilder

人生难得几回搏，此时不搏待何时。这篇文章主要讲述vue+hbuilder监听安卓返回键问题相关的知识，希望能为你提供帮助。
1.监听安卓返回键问题
效果:在一级页面按一下返回键提示退出应用,按两下退出应用; 在其它页面中,按一下返回上个历史页面

1 2	`import` `mui from` `‘./assets/js/mui.min.js‘` `Vue.prototype.$mui = mui;`

在一级页面mounted时

文章图片

1 this.$mui.plusReady( () => { 2 var backcount = 0; 3 this.$mui.back = ()=> { 4 if (this.$mui.os.ios) return; 5 if (backcount > 0) { 6 if (window.plus) plus.runtime.quit(); 7 return; 8 }; 9 this.$layer.msg(‘再点击一次退出应用!‘) 10 backcount++; 11 setTimeout( () => { 12 backcount = 0; 13 }, 2000); 14 }; 15 })

文章图片

　在其它页面mounted时

1 this.$mui.plusReady(() => { 2 this.$mui.back = () => { 3 this.$router.go(-1); 4 }; 5 });

在每次组件加载时都重写一下返回按钮的事件,如果不重写,此页面就会使用上个页面中定义的返回事件,这个事件可能是退出app也可能是返回上次历史页面,这样就会造成事件冲突,所以在每次组件加载时都重写返回事件.
2.键盘弹起会把固定在底部的导航顶上去

文章图片

data() { return { docmHeight: document.documentElement.clientHeight, //默认屏幕高度 showHeight: document.documentElement.clientHeight, //实时屏幕高度 hidshow: true //显示或者隐藏footer }; }, mounted() { // window.onresize监听页面高度的变化 window.onresize = () => { return (() => { this.showHeight = document.body.clientHeight; })(); }; }, watch: { showHeight: function() { if (this.docmHeight > this.showHeight) { this.hidshow = false; } else { this.hidshow = true; } } }

文章图片
注意document要撑满屏幕高度!
参考地址:https://www.jianshu.com/p/210fbc846544
3.切换页面的转场效果使用:vueg
参考网址:https://github.com/jaweii/vueg
4.上拉加载下拉刷新使用:mescroll
参考网址:http://www.mescroll.com/
5.设置沉浸式

文章图片