赋予 IM 输入框以微信般优雅，且不可忽视

Android

2024-02-06 03:10:24

底部输入框的处理方式

在构建 IM 应用程序时，不可避免地会涉及到底部输入框的设计。开发者们绞尽脑汁，给出各种各样的方案，希冀于实现最优的用户体验。

浮动输入框

这种方式将输入框置于屏幕中间或底部，让输入框占据聊天窗口的大部分区域，当用户进行输入时，聊天记录被向上推开。

固定输入框

固定输入框就是将输入框固定在屏幕底部，不会随着聊天记录的增多而向上移动。这种方式在某些情况下会更方便输入，因为用户不必担心聊天记录被推开而丢失信息。

可隐藏输入框

这种方式将输入框放在屏幕底部，但当用户不使用时，会自动隐藏。当用户点击输入框时，它会再次出现。这种方式可以为屏幕腾出更多空间，同时保持输入框的可用性。

微信的解决方案

微信的输入框位于屏幕底部，但不会随着聊天记录的增多而向上移动。当用户输入时，聊天记录会以一种非常优雅的方式被压缩，以腾出空间给输入框。当用户停止输入时，聊天记录会自动恢复原来的大小。

仿微信底部输入框交互的实现

实现仿微信底部输入框交互并不困难，可以使用 CSS 和 JavaScript 来实现。首先，需要创建一个 div 元素来充当输入框。然后，使用 CSS 来设置输入框的位置和样式。接下来，需要使用 JavaScript 来实现输入框的交互行为。

HTML 结构

<div class="input-container">
  <input type="text" class="input-field">
  <button class="send-button">发送</button>
</div>

CSS 样式

.input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #ffffff;
}

.input-field {
  width: 100%;
  height: 30px;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  font-size: 16px;
}

.send-button {
  width: 50px;
  height: 30px;
  margin-left: 10px;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  font-size: 16px;
  background-color: #0084ff;
  color: #ffffff;
}

JavaScript 代码

const inputField = document.querySelector('.input-field');
const sendButton = document.querySelector('.send-button');

sendButton.addEventListener('click', function() {
  const message = inputField.value;

  // 发送消息

  inputField.value = '';
});

inputField.addEventListener('input', function() {
  const inputHeight = inputField.scrollHeight;

  inputContainer.style.height = inputHeight + 20 + 'px';
});