在uniapp中实现即时通讯中的【发送语音】

目录

效果描述

效果展示

代码实现

渲染层

逻辑层

---

效果描述

在与好友的对话框中，点击语音图标可以切换到给好友发送语音，长按发送语音的按钮即可开始录音：

如果录制时间 小于60s 时，松手则表示录音结束并将语音消息发送给对方；

如果录制的时间 超过60s 则自动结束，并将语音发送给对方；

如果在录制 60s之内 并且没有松手，而是上滑100像素，则表示取消发送该条语音；

效果展示

默认页面

语音消息录制中

取消发送

发送成功

代码实现

发送语音部分的代码是全的，但是别的部分代码有缺失，如果需要对话框页面完整代码的可以私信。

渲染层

    <view class="guding">
      <view class="bottom" :style="bottomStyle">