uniapp 写一个跟随键盘谈起,位置在键盘上方的聊天输入框
时间: 2023-02-09 18:56:28 浏览: 457
uni-app聊天页面
好的,这是一个可以帮助你实现跟随键盘的聊天输入框的示例代码:
1. 首先,你需要在你的 Vue 组件中监听键盘的显示和隐藏事件。你可以使用 uni.onKeyboardHeightChange 来实现这一点。
```
onReady() {
uni.onKeyboardHeightChange(res => {
if (res.height === 0) {
// 键盘隐藏
this.keyboardHeight = 0
} else {
// 键盘显示
this.keyboardHeight = res.height
}
})
}
```
2. 然后,你可以使用 computed 属性将输入框的样式动态绑定到键盘的高度上。
```
computed: {
inputStyle() {
return {
bottom: this.keyboardHeight + 'px'
}
}
}
```
3. 最后,在你的输入框的样式中绑定这个 computed 属性即可。
```
<view class="input-wrap" :style="inputStyle">
<input class="input" placeholder="输入聊天内容" v-model="inputValue" />
</view>
```
这样,你的输入框就可以随着键盘的显示和隐藏而自动调整位置了。
阅读全文