1. Problemas existentes: en la interfaz de chat del subprograma WeChat, cuando el cuadro de entrada recibe el foco, el teclado del teléfono móvil se activará automáticamente. Cuando aparezca el teclado, la página se moverá hacia arriba como un todo y el encabezado de la página la información desaparecerá.
2. El efecto a lograr
1. Cuando aparece el teclado, el cuadro de entrada en la parte inferior sigue al teclado,
2. El encabezado de la página se fija en la parte superior, 3. La altura del área de información del chat (es decir, el área de contenido) se ajusta y el área se desplaza parcialmente;
Comparación de representaciones
3. Soluciones
1. Configure el teclado para que se levante para que la página no se mueva hacia arriba; 2. Configure el cuadro donde se encuentra el cuadro de entrada en posición absoluta; 3. Obtenga la altura del teclado cuando se levante el teclado; 4. Configure el altura del teclado de la parte inferior del cuadro donde se encuentra el cuadro de entrada; 5. Borrar La flotación causada por la posición fija del cuadro de entrada (establezca padding-bottom debajo del cuadro superior del cuadro de entrada [la altura es la misma que la cuadro de entrada]; o agregue un elemento a nivel de bloque sobre el cuadro donde se encuentra el cuadro de entrada [la altura es la misma que la del cuadro de entrada])** Nota: **Aquí encapsulo la parte de entrada del mensaje en un componente e introduzco en la [view] donde se encuentra, por lo que es necesario pasar la altura del teclado desde el padre a la caja donde se encuentra, si está en el mismo archivo, si es así, asigne directamente la altura del teclado obtenido a [bottom ]. #### 4. Código de implementación
1. Entrada de subcomponentes
//子组件
<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. Referencia del componente principal
<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. Resumen:
Dado que la unidad de tamaño del sistema obtenido es px, la unidad de valor establecida para la parte inferior también debe ser px. No puede usar rpx solo porque es un teléfono móvil, y 2 veces rpx no es aceptable, porque no todos los teléfonos móviles tienen el mismo resolución como la nuestra. 2 veces de 375 en el dibujo de diseño, ¡debe usar px!
por fin
Recientemente, también clasifiqué una nota de JavaScript y ES, un total de 25 puntos de conocimiento importantes, y expliqué y analicé cada punto de conocimiento. Puede ayudarlo a dominar rápidamente el conocimiento relevante de JavaScript y ES, y mejorar la eficiencia del trabajo.
Amigos necesitados, puede hacer clic en la tarjeta a continuación para recibir y compartir gratis