这篇“uni-app微信小程序input输入框页面整体上移问题怎么解决”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“uni-app微信小程序input输入框页面整体上移问题怎么解决”文章吧。
最近的做了个客服聊天的功能，遇到一个问题如下：
在手机上点击聊天页底部的input框后，键盘弹起同时页面会整体上移，标题栏被顶上去了。
input 获取焦点时会自动调起手机键盘，设置 :adjust-position="true"，会导致键盘弹起时页面整体上移
设置使键盘弹起使页面不上移
设置输入框所在盒子为绝对定位
键盘弹起时获取键盘高度
设置输入框所在盒子的bottom的键盘高度
注意：我这里是将消息输入部分封装成了组件，引入到它所在的
view里的，所以需要将键盘高度子传父传值给它所在的盒子，如果是在同一个文件中的话直接将获取到的键盘高度赋值给bottom就可以。
1. input
计算
安全
数据库
网络和加速
企业服务
<input
class="TUI-message-input-area"
:adjust-position="false" // 修改为 false，使键盘弹起页面不上移
cursor-spacing="20"
v-model="inputText"
@input="onInputValueChange"
maxlength="140"
type="text"
placeholder-class="input-placeholder"
placeholder="说点什么呢~"
@focus="inputBindFocus" // 添加获取焦点键盘弹起事件
@blur="inputBindBlur" // 添加失去焦点键盘隐藏事件
/>methods: {
inputBindFocus(e) {
// 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值
// 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 px
this.$emit('changeBottomVal', e.detail.height + 'px')
},
inputBindBlur() {
// input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0
this.$emit('changeBottomVal', 0)
}
}2. input 所在的盒子:
<view v-if="showChat" class="message-input" :>
<TUI-message-input id="message-input" ref="messageInput" :conversation="conversation" @sendMessage="sendMessage" @changeBottomVal="changeBottomVal"/>
</view>data() {
return {
bottomVal: ''
}
}
methods: {
changeBottomVal(val) {
this.bottomVal = val
}
}.message-input {
flex-shrink: 0;
width: 100%;
position: absolute; // input 所在盒子设置绝对定位
left: 0;
bottom: 0; // 默认 0
z-index: 199;
}以上就是关于“uni-app微信小程序input输入框页面整体上移问题怎么解决”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
