1. Existing problems: In the chat interface of the WeChat applet, when the input box gets the focus, the mobile phone keyboard will be automatically activated. When the keyboard pops up, the page will move up as a whole, and the page header information will disappear.
2. The effect to be achieved
1. When the keyboard pops up, the input box at the bottom follows the keyboard;
2. The page header is fixed at the top; 3. The height of the chat information area (that is, the content area) is adjusted, and the area scrolls partially;
Comparison of renderings
3. Solutions
1. Set the keyboard to pop up so that the page does not move up; 2. Set the box where the input box is located to absolute positioning; 3. Get the height of the keyboard when the keyboard pops up; 4. Set the keyboard height of the bottom of the box where the input box is located; 5. Clear The floating caused by the fixed positioning of the input box (set padding-bottom under the upper box of the input box [the height is the same as the input box]; or add a block-level element above the box where the input box is located [the height is the same as the input box])** Note: **Here I encapsulate the message input part into a component and introduce it into the [view] where it is located, so it is necessary to pass the keyboard height from the parent to the box where it is located. If it is in the same file If so, directly assign the obtained keyboard height to [bottom]. #### 4. Implementation code
1. Subcomponent 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"> // 添加失去焦点键盘隐藏事件 //重点在这里！！！一定要用 px！！！
methods: {inputBindFocus(e) {// 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值// 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 pxthis.$emit('changeBottomVal' , e.detail.height +'px') },inputBindBlur({// input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0 this.$emit('changeBottomVal', 0)}, }
2. Parent component reference
<view style="height: 200rpx;"></view>/**清除浮动**/
<view class="message-input " :style="{ bottom: bottomVal }">
<TUI-message-input ref="messageInput" :conversation="conversation" :isOrder="true"
@handleCall="handleCall" @sendMessage="sendMessage" @changeBottomVal="changeBottomVal">
</TUI-message-input>
</view>
<script> //引入输入框组件
import TUIMessageInput from "./components/chat/message-input/index";
export default {data() {return {bottomVal: '',}},
methods：{//键盘弹起事件changeBottomVal(val){this.bottomVal = val},
} </script>
<style lang="scss"> .message-input {position: absolute; // input 所在盒子设置绝对定位flex-shrink: 0;width: 100%;left: 0;bottom: 0;// 默认 0z-index: 199;padding-bottom: env(safe-area-inset-bottom);background: #FFFFFF;box-sizing: border-box;
} </style>
5. Summary:
Since the size unit of the obtained system is px, the value unit set for bottom must also be px! You cannot use rpx just because it is a mobile phone, and 2 times rpx is not acceptable, because not every mobile phone has the same resolution as ours. 2 times of 375 on the design drawing, must use px!
at last
Recently, I also sorted out a JavaScript and ES note, a total of 25 important knowledge points, and explained and analyzed each knowledge point. It can help you quickly master the relevant knowledge of JavaScript and ES, and improve work efficiency.
Friends in need, you can click the card below to receive and share for free