前后端分离实现网站开发,网站建设公司哪家好 都来磐石网络,小包工头接活的平台,wordpress 一键置顶聊天小程序#xff0c;界面带有输入框#xff0c;当输入框中聚焦后#xff0c;底部自动谈起输入法。此时输入框也要随之出现在输入法上方。默认情况下#xff0c;输入框此时会被输入法覆盖掉。
以下是亲自实践#xff0c;解决这个问题的方法#xff1a;
一、小程序大概…聊天小程序界面带有输入框当输入框中聚焦后底部自动谈起输入法。此时输入框也要随之出现在输入法上方。默认情况下输入框此时会被输入法覆盖掉。
以下是亲自实践解决这个问题的方法
一、小程序大概布局
templateview styleheight: 100%; display: flex; flex-direction: column;!-- 自定义导航栏 --head-nav :navRedirectPagenavRedirectPage/head-nav!-- 小程序界面内容 --view classcontainer :stylecontainerStyle!-- 聊天界面内容 --scroll-view reflist :scroll-topscrollTop classchat-container :scroll-ytrue/scroll-view!-- 底部输入框 --view classbottom-bar :stylebottom_autosize_styleview classinput-viewuv-textarea selectabletrue :cursor-spacing20 v-modelinputText :inputBorderfalse customStyleoverflow: scroll;max-height: 75px;border-width: 0px !important;background-color: #F7F7FC;margin-left: 12px;padding: 7px;:adjust-positionfalse :show-confirm-barfalse blurinputBindBlur :maxlength500 autoHeight placeholder请输入内容 focusinputBindFocus/uv-textarea button classsend-button clicksendMessage:disabled!inputText.trim().length0 || sendDisabledimage classsend-message src/static/v2/aichat/fasong.png //button/view/view/view/view
/templatecss样式表
默认样式为 // 聊天窗口.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 这个变量的变化即可实现。
