苏州定制建站网站建设新闻今天的最新新闻
聊天小程序，界面带有输入框，当输入框中聚焦后，底部自动谈起输入法。此时输入框也要随之出现在输入法上方。默认情况下，输入框此时会被输入法覆盖掉。
以下是亲自实践，解决这个问题的方法：
一、小程序大概布局
<template><view style="height: 100%; display: flex; flex-direction: column;"><!-- 自定义导航栏 --><head-nav :navRedirectPage="navRedirectPage"></head-nav><!-- 小程序界面内容 --><view class="container" :style="containerStyle"><!-- 聊天界面内容 --><scroll-view ref='list' :scroll-top="scrollTop" class="chat-container" :scroll-y="true"></scroll-view><!-- 底部输入框 --><view class="bottom-bar" :style="bottom_autosize_style"><view class="input-view"><uv-textarea selectable="true" :cursor-spacing="20" v-model="inputText" :inputBorder="false" customStyle="overflow: scroll;max-height: 75px;border-width: 0px !important;background-color: #F7F7FC;margin-left: 12px;padding: 7px;":adjust-position="false" :show-confirm-bar='false' @blur="inputBindBlur" :maxlength="500" autoHeight placeholder="请输入内容" @focus="inputBindFocus"></uv-textarea> <button class="send-button" @click="sendMessage":disabled="!inputText.trim().length>0 || sendDisabled"><image class="send-message" src="/static/v2/aichat/fasong.png" /></button></view></view></view></view>
</template>
css样式表：
- 默认样式为：
// 聊天窗口.chat-container {flex-grow: 1; // 窗口大小为可变overflow-y: auto;}// 底部输入框.bottom-bar {position: relative;display: flex;align-items: center;padding: 6px 13px 6px 13px; // 主要是padding-bottom变化}
- 当焦点在输入框内时，需要调整内容：
// 聚焦方法
inputBindFocus(e){console.log('e.detail.height:', e.detail.height)if (e.detail.height) {this.bottom_autosize_style = "padding-bottom:" + (e.detail.height + 6ssss) + "px;"if (!this.showScrollToBottom) {this.scrollToBottom();}}
},
// 失焦方法
inputBindBlur(){// this.containerStyle = ' height:' + this.containerHeight + 'px;';this.bottom_autosize_style = ""if (!this.showScrollToBottom) {this.scrollToBottom();}
}
请注意 bottom_autosize_style 这个变量的变化，即可实现。