uni-app聊天页面点击发送按钮键盘会收起

在uni-app中实现点击发送按钮时自动收起键盘的功能，可以通过结合Vue的事件处理和uni-app提供的API来实现。下面是一个示例代码，展示如何在聊天页面实现这一功能。

首先，假设你的聊天页面结构大致如下：

<template>
  <view class="chat-page">
    <view class="chat-input">
      <input
        type="text"
        v-model="inputText"
        @focus="inputFocus"
        @blur="inputBlur"
        placeholder="输入消息..."
      />
      <button @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      keyboardHeight: 0,
    };
  },
  methods: {
    inputFocus() {
      // 可以在这里获取键盘高度，用于布局调整（可选）
      // 例如使用uni.getSystemInfoSync().windowHeight等计算
      console.log('Input focused');
    },
    inputBlur() {
      console.log('Input blurred');
    },
    sendMessage() {
      if (this.inputText.trim() !== '') {
        // 发送消息的逻辑，例如通过API发送请求
        console.log('Sending message:', this.inputText);
        
        // 发送后清空输入框
        this.inputText = '';
        
        // 调用收起键盘的函数
        this.hideKeyboard();
      } else {
        uni.showToast({
          title: '消息不能为空',
          icon: 'none',
        });
      }
    },
    hideKeyboard() {
      // 使用uni.hideKeyboard()方法收起键盘
      uni.hideKeyboard({
        success: () => {
          console.log('Keyboard hidden');
        },
        fail: (err) => {
          console.error('Failed to hide keyboard:', err);
        },
      });
    },
  },
};
</script>

<style>
.chat-page {
  padding: 16px;
}
.chat-input {
  display: flex;
  align-items: center;
  margin-top: 16px;
}
input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  margin-left: 8px;
  padding: 8px 16px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>

在这个示例中，sendMessage方法在点击发送按钮时被调用。该方法首先检查输入框是否为空，如果不为空，则执行发送消息的逻辑（此处为打印消息内容），然后清空输入框，并调用hideKeyboard方法收起键盘。hideKeyboard方法使用uni.hideKeyboard()API来实现键盘的收起功能。

这样，用户在聊天页面点击发送按钮后，键盘会自动收起，提升用户体验。