900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Vue移动端input textarea点击输入框 弹出软件键盘 底部被顶起问题

Vue移动端input textarea点击输入框 弹出软件键盘 底部被顶起问题

时间:2022-11-03 17:19:11

相关推荐

Vue移动端input textarea点击输入框 弹出软件键盘 底部被顶起问题

软件盘弹出引起底部被顶起问题

思路:通过监听屏幕高度,判断是否弹出软键盘,隐藏底部标签

直接上代码:

data () {return {docmHeight: window.innerHeight, //默认屏幕高度showHeight: window.innerHeight, //实时屏幕高度hidshow: true, //显示或者隐藏footer}},

mounted() {// window.onresize监听页面高度的变化window.addEventListener('resize', () => {this.showHeight = window.innerHeightconsole.log('this.showHeight:' + this.showHeight);console.log('this.docmHeight:' + this.docmHeight);if (this.docmHeight - this.showHeight > 50) {//Android系统: 软键盘弹出 隐藏footerthis.hidshow = false} else {//Android系统: 软键盘收起 显示footerthis.hidshow = true}});},

<div class="bottom-fixed" v-show="hidshow"><div class="storage" v-text="'取消'" @click="handleReturn"></div><div class="submit" v-text="'提交'" @click="handleSubmit"></div></div>

html标签根据自己的底部标签来,重点是v-show="hidshow"

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。