首页 > 其他分享 >uni-app中IM的发送的修改以及回滚底部的修改

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

时间:2023-04-14 15:44:52浏览次数:42  
标签:回滚 const newVal app 发送 修改 oldVal data any

在使用的过程中发现输入文字之后没有相关的发送按钮,所以对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 首次进入
        }
      });
    });

 

标签:回滚,const,newVal,app,发送,修改,oldVal,data,any
From: https://www.cnblogs.com/menxiaojin/p/17318504.html

相关文章

  • 研发运维双管齐下!Seal AppManager的正确打开方式
    新一代应用统一部署管理平台SealAppManager采用平台工程的理念,通过降低基础设施操作的复杂度为研发和运维团队提供易用、一致的应用管理和部署体验。SealAppManager帮助研发和运维团队实现关注点分离,即运维工程师负责基础建设,研发可以在零基础设施知识的情况下实现应用部署管......
  • centos下载报错Error: Failed to download metadata for repo ‘appstream‘: Cannot
    ✨在学习使用docker技术过程中,基于centos镜像自定义新的镜像,其中基础镜像centos需要提前安装好vim和net-tools,然而在刚开始通过yum-yinstallvim安装vim时,便出现了错误提示信息:Error:Failedtodownloadmetadataforrepo'appstream':Cannotpreparein......
  • hexo博客生成报错YAMLException: can not read a block mapping entry
    报错信息:YAMLException:cannotreadablockmappingentry;amultilinekeymaynotb---title:[转]--ISP(图像信号处理)算法概述、工作原理、架构、处理流程date:2020-03-2221:39:40tags:[图像处理]mathjax:true---报错位置是第2行第5位意思是我的date:2020-03-222......
  • uni-app小程序添加IM聊天以及音视频
    uni-app开发小程序的过程中,需要继承IM的聊天以及音视频功能,因为我是放在分包里的,步骤如下:按照文档要求,然后在相关的界面引用就可以了。音视频引入:这里引入之后还有一个问题是你必须每次在微信开发工具构建npm一下,具体操作如下:在微信开发工具终端依次输入如下指令:npminit......
  • exception: cannot find actionmappings or actionformbeans collection
    多种情况会导致这个问题,但大致就是以下几种情况: 1。Web.xml未初始化问题少了一个<load-on-startup>0</load-on-startup>这样开始是没有加载这个类,就没有初始化struts-config.xml,所以找不到actionmappingsoractionformbeanscollection。 2。struts-config.xml问题 3。jar包不......
  • Chrome - 修改请求参数后重放请求
    接口根据请求参数不同,返回不同的响应值。在charles中可以使用断点的方式,那么在谷歌浏览器的控制台中怎么实现呢?右键请求-Copy-Copyasfetch切换到控制台tab,粘贴修改参数后,按下回车返回networktab即可查看到重放请求Copyasfetch是指在Chrome浏览器的开发者......
  • AppSettings.json 配置与获取
    1.第一步在我们的AppSettings.json文件中配置好需要的参数    2.创建一个AppSettingHelp类引用:usingMicrosoft.Extensions.Configuration;usingMicrosoft.Extensions.Configuration.Json;  3.然后我们就可以在Startup中进行调用  stringUrlName=AppSetti......
  • jquery ajax contentType为application/json及设置请求头header
    1.找了好久发现contentType一般为默认的application/x-www-form-urlencoded,这次post请求后台限定了为application/json2.当设置contentType为application/json还是出错时,把data也要转换一下$.ajax({method:"POST",url:"",contentType:'application/json',......
  • 线段树(单点修改,区间查询)
    题目描述如题,已知一个数列,你需要进行下面两种操作:将某一个数加上 x求出某区间每一个数的和输入格式第一行包含两个正整数 n,m,分别表示该数列数字的个数和操作的总个数。第二行包含 n 个用空格分隔的整数,其中第 i 个数字表示数列第 i 项的初始值。接下来 ......
  • Android 平台使用 appium 自动化操作 webView 的经验
    更多内容见草稿:https://wkmcyz.notion.site/Appium-H5-c9c287855ef74ef0ae5d8f819da3923f本文章主要介绍在Android平台上使用appium对app内的webView进行自动化操作上的一些知识,包括一些配置和可以进行的操作等。需要读者:熟悉如何使用appium进行nativeapp的自动......