示例：在webapp页面的底部，有时候我们会使用 position: absolute;bottom: 0; 实现一些需求，如tabbar，固定到底部的一些操作按钮。
问题：当页面有输入框的时候，底部的定位元素会被输入法顶到上面？
解决办法：
使用window.onresize监听窗口变化，动态修改有定位的元素css，当窗口发生变化时，让定位元素隐藏。
用法:
- 在store.js里定义:
screenHeight——用于存放全局的视口高度
changeScreenHeight ——用于动态改变视口的高度
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
strict: true,
state: {
screenHeight: document.documentElement.clientHeight,
},
mutations: {
changeScreenHeight (state, val) {
state.screenHeight = val
}
}
})
export default store
- 在App.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 {
tabbarDisplay: 'block'
}
},
watch: {
/**
* 侦听页面可视高度的变化,将底部tabbar display:block
*/
'$store.state.screenHeight' () {
// 使用视口高度变量
if (this.$router.currentRoute.name === 'insured' || this.$router.currentRoute.name === 'order') {
this.tabbarDisplay = this.tabbarDisplay === 'block' ? 'none' : 'block'
}
}
},
methods: {
...mapMutations(['changeScreenHeight'])
},
mounted () {
window.onresize = () => {
this.changeScreenHeight(document.documentElement.clientHeight)
}
}
}
</script>
- 在其它子页面监听视口变化，动态操作
直接引入就可以使用，因为window.onresize是全局注册的。
<template>
<div class="regist">
<div class="regist-header"></div>
<div class="regist-body">
<div class="regist-foot" ref="foot" style="display:block;">
一些定位的操作按钮
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
watch: {
screenHeight (newVal, oldVal) {
if (Math.abs(oldVal - newVal) > 60) {
this.$refs.foot.style.display = this.$refs.foot.style.cssText === 'display: block;' ? 'none' : 'block'
}
}
},
computed: {
...mapState(['screenHeight'])
}
}
</script>
注意：
- 在项目中 window.onresize只能挂载一次，在多个页面中同时挂载 window.onresize时，只有其中一个 window.onresize会起作用。
- mutations是唯一更改store的地方，更改store里的screenHeight，必须在mutations里定义函数，在需要更改store的地方调用执行。
- 引入store以后，直接就可以使用，App.vue页面挂载的onresize监听是全局的。
参考：
https://blog.csdn.net/xuaner8786/article/details/81565219
