vue+hbuilder開發app記錄

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

參考網址: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,

而後把這個高度給頂部導航和某些頁面加上上邊距就好了