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

1.监听安卓返回键问题

效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面

 
         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

扫描二维码关注公众号，回复： 4738714 查看本文章

参考网址:https://github.com/jaweii/vueg

4.上拉加载下拉刷新使用:mescroll

参考网址:http://www.mescroll.com/

5.设置沉浸式

配置manifest.json
"plus": {
    "statusbar": {
        "immersed": true 
    },


    "google": {
        "immersedStatusbar": true,
    }
}

获取状态栏高度,可以使用mui提供的方法,也可以使用js : window.screen.height - window.innerHeight,

然后把这个高度给顶部导航和某些页面加上上边距就行了

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

猜你喜欢