需求:
1. 手机键盘弹起后,页面底部的输入框跟随弹起,且页面不被顶上去
2. 手机键盘收起后,输入框定位到tabbar上方位置
弹起:
收起:
html:
<view class="input-box" :style="inputStyle">
<textarea
class="textinput"
placeholder-class="input-place"
auto-height
:maxlength="2000"
v-model="text"
placeholder="在此输入您想要我研究的问题"
:show-confirm-bar="false"
:adjust-position="false"
@keyboardheightchange="keyboardMove"
></textarea>
</view>
js:
const tabbarHeight = 60
const inputBottom = ref(tabbarHeight)
const keyboardMove = (e) => {
if (e.detail.height) {
inputBottom.value = e.detail.height
} else {
inputBottom.value = tabbarHeight
}
}
const inputStyle = computed(() => {
return inputBottom.value > tabbarHeight ? {
bottom: `${inputBottom.value}px`
} : {
bottom: `calc(${inputBottom.value}px + env(safe-area-inset-bottom))`
}
})
css:
.input-box {
position: fixed;
left: 0;
bottom: calc(60px + env(safe-area-inset-bottom));
}
textarea {
max-height: 160rpx !important;
overflow-y: hidden;
}