关于uni-app导航栏问题

这几天做uniapp的H5页面，上线后发现底部的导航栏，在我要打开键盘的时候，导航栏就被键盘顶上去了，现在记录一下解决办法

我没有自定义导航栏，还是用的官方自带的，在需要使用导航栏的页面，比如说在首页index.vue，定义两个变量，一个是默认屏幕高度，一个是实时屏幕高度

代码如下：

docmHeight: document.documentElement.clientHeight, //默认屏幕高度

showHeight: document.documentElement.clientHeight, //实时屏幕高度

然后在初始化方法mounted里添加监听页面高度的变化的方法

代码如下

	mounted() {
			// window.onresize监听页面高度的变化
			window.onresize = () => {
				return (() => {
					this.showHeight = document.body.clientHeight;
				})()
			}
		}

最后使用watch监听属性，如果监听到实时屏幕高度小于默认屏幕高度，则证明是有键盘d出，这是设置导航栏隐藏即可，代码如下

watch: {
			showHeight: function() {
				if (this.docmHeight > this.showHeight) {
					this.hideshow = false
					//官方提供的隐藏导航栏的方法
					uni.hideTabBar({
						animation: false
					})
				} else {
					this.hideshow = true
					//官方提供的显示导航栏的方法
					uni.hideTabBar({
						animation: true
					})
				}
			}
		},

这样就完成了，亲测有效，如果你是自定义组件，那么原理也一样，只需在你引入的组件上加一个v-show属性，值就是我上面代码里写的hideshow，自己定义一个hideshow:true的属性就可以了