admin 管理员组文章数量: 1103806
问题描述:移动端页面输入框聚焦伴随着键盘弹起,底部按钮浮到键盘上方,此时如果直接点击底部按钮进行查询操作,进入到的下一页的列表页面高度渲染会出现问题。
解决思路:在键盘弹起时,不让原本固定在底部的按钮自动浮起。监听屏幕的实时高度,控制底部按钮的显示与否,从而达到按钮固定在底部的效果。
解决方案(本例是在vue框架下实现的解决方案代码):
html部分:
<div v-show="hidShow"><query-bar @handleReset="handleReset" @handleQuery="handleQuery" /></div>
data部分:
data () {
docmHeight: document.documentElement.clientHeight, // 默认屏幕高度
showHeight: document.documentElement.clientHeight, // 实时屏幕高度
hidShow: true, // 显示或者隐藏footer
}
监听屏幕实时高度:
watch: {
showHeight: function () {
if (this.docmHeight > this.showHeight) {
this.hidShow = false
} else {
this.hidShow = true
}
},
},
mounted周期:
mounted () {
let vm = this
// window.resize监听页面高度的变化
window.onresize = () => {
return (() => {
this.showHeight = document.body.clientHeight
})()
}
},
版权声明:本文标题:移动端键盘弹起导致底部按钮上浮解决方案 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.520sys.cn/xp/1754943911a1447872.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论