1.js横竖屏切换
renderResize: function () {
// 判断横竖屏
let width = document.documentElement.clientWidth
let height = document.documentElement.clientHeight
if(width > height||width < height) {
//条件一横屏，条件二竖屏
// alert('横屏');
location. reload();
}
}
2.js(vue vuex)开启全面屏虚拟按键处空白处理
问题展示：
安卓手机使用小米手机将显示里的全面屏模式开启，以有虚拟按键（即不是全面屏）切换到全面屏会把原有虚拟按键的位置空出来一部分，所以要监听是否开启全面屏，开启之后需要刷新或视口高度重新计算。
这里使用的vue
vue有一个方法：Vue window.onresize监听窗口变化
1.在store.js里定义:
screenHeight——用于存放全局的视口高度
changeScreenHeight ——用于动态改变视口的高度
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
screenHeight: document.documentElement.clientHeight,
},
mutations: {
changeScreenHeight (state, val) {
state.screenHeight = val;
}
},
actions:{
}
})
前台vue文件中引入vue，.vue里挂载window.onresize，也可以使用（例：watch里）
<template>
<div class="app">
<div class="app-body">
<router-view></router-view>
</div>
<router-view name="tabbar" :style="{ display: tabbarDisplay}"></router-view>
</div>
</template>
<script>
import {
mapMutations } from 'vuex'
export default {
name: 'App',
data () {
return {
}
},
watch: {
/**
* 侦听页面可视高度的变化,将底部tabbar display:block
*/
'$store.state.screenHeight' () {
// 使用视口高度变量
location. reload();
}
},
methods: {
...mapMutations(['changeScreenHeight'])
},
mounted () {
window.onresize = () => {
this.changeScreenHeight(document.documentElement.clientHeight)
}
}
}
</script>
注意：
在项目中 window.onresize只能挂载一次，在多个页面中同时挂载 window.onresize时，只有其中一个 window.onresize会起作用。
mutations是唯一更改store的地方，更改store里的screenHeight，必须在mutations里定义函数，在需要更改store的地方调用执行。
引入store以后，直接就可以使用，App.vue页面挂载的onresize监听是全局的。