示例:在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