vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
更新时间：2019年11月06日 15:40:14 作者：凉_风有信
今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
话不多说，直接上问题图片
这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面
网上搜到的解决方案有两种，
一种是监听页面高度（我采用的这种）
一种是监听软键盘事件（ios和安卓实现方式不同，未采用）
下面是实现代码
data() {
return {
docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
hideshow:true //显示或者隐藏footer
}
},
watch: {
//监听显示高度
showHeight:function() {
if(this.docmHeight > this.showHeight){
//隐藏
this.hideshow=false
}else{
//显示
this.hideshow=true
}
}
},
mounted() {
//监听事件
window.onresize = ()=>{
return(()=>{
this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
})()
}
},
<div class="bottom" v-show="hideshow">
<div class="btn">
确认操作
</div>
</div>
我这里使用的是方法是：当键盘弹出时，将按钮隐藏。如果必须出现按钮的话，可以修改按钮回归到正常的流中。
以上这篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇Vue2.0 给Tab标签页和页面切换过渡添加样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本
这篇文章主要介绍了Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
在vue项目中,父子组件数据传递是最常见的场景,但是今天在开发过程中父级数据传递到子组件,控制子组件的显隐,下面这篇文章主要给大家介绍了关于vue3如何使用watch监听props中数据的相关资料,需要的朋友可以参考下2022-10-10
本篇文章主要介绍了vue实现动态添加数据滚动条自动滚动到底部的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
今天小编就为大家分享一篇浅谈VUE-CLI脚手架热更新太慢的原因和解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue截取视频第一帧的图片问题,基本就是用cavas进行绘制，解决一下跨域问题，截视频第一帧，然后根据视频原本的宽高进行绘制，最后转一下图片格式即可，需要的朋友可以参考下2022-11-11
基于Vue.js与WordPress Rest API构建单页应用详解
这篇文章主要介绍了基于Vue.js与WordPress Rest API构建单页应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了Vue SPA单页应用首屏优化实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了Vue3中的组件数据懒加载问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了vue自定义指令实现v-tap插件的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论