526互联

uni-app中IM的发送的修改以及回滚底部的修改

发布时间 2023-04-14 15:45:02作者: 星宝攸宁

在使用的过程中发现输入文字之后没有相关的发送按钮，所以对TUIKit/TUIPages/TUIChat/components/message-input/index.vue做微调，如下微调内容：

添加@input方法

<input
          class="TUI-message-input-area"
          :adjust-position="true"
          cursor-spacing="20"
          v-model="inputText"
          confirm-type="send"
          confirm-hold="true"
          @confirm="handleSendTextMessage"
      @input="onInputValueChange"
          maxlength="140"
          type="text"
          placeholder-class="input-placeholder"
          placeholder="说点什么呢~"
        />

此处做如下更改，判断是否展示

<view @tap="handleExtensions" v-if="!sendMessageBtn">
          <image
            class="TUI-icon"
            src="../../../../assets/icon/more.svg"
          ></image>
        </view>
<view v-else class="TUI-sendMessage-btn" @touchend.prevent="handleSendTextMessage">发送</view>

相关的js操作

// 发送消息
    const handleSendTextMessage = (e: any) => {
      if (data.inputText.trimEnd()) {
        uni.$TUIKit.TUIChatServer.sendTextMessage(
          JSON.parse(JSON.stringify(data.inputText))
        );
      }
      data.inputText = " ";
  data.sendMessageBtn = false
  // message.scrollId='C2C'+message.ID
    };
//监听右侧按钮的变化
const onInputValueChange  = (e: any) => {
  if (e.detail.value) {
    data.sendMessageBtn = true
  }else{
    data.sendMessageBtn = false
  }
    };

关于页面回滚底部：在聊天界面添加如下代码：

watch(messages, (newVal: any, oldVal: any) => {
      nextTick(() => {
        const newLastMessage = newVal[newVal.length - 1];
        const oldLastMessage = oldVal ? oldVal[oldVal.length - 1] : {};
        data.oldMessageTime = messages.value[0].time;
        handleShowTime();
        if (oldVal && newLastMessage.ID !== oldLastMessage.ID) {
//发完消息之后的页面滚动
setTimeout(() => {
  data.scrollTop = 998+(newVal.length-15)*50;
}, 500);
          // handleScrollBottom(); // 非从conversationList 首次进入
        }
      });
    });