vue+hbuilder監聽安卓返回鍵問題
阿新 • • 發佈:2019-01-01
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.設定沉浸式
配置manifest.json "plus": { "statusbar": { "immersed": true }, "google": { "immersedStatusbar": true, } }
獲取狀態列高度,可以使用mui提供的方法,也可以使用js : window.screen.height - window.innerHeight,
然後把這個高度給頂部導航和某些頁面加上上邊距就行了