热门标签
热门文章
- 1mac 开启android 模拟器,折腾mac的经验积累 2：mac上如何玩安卓模拟器
- 2C/C++编程规范_c及c++编程规范#define_example
- 3tp5防止sql注入mysql_使用TP框架仿sql攻击注入
- 4SQL注入攻击的简单示例
- 5山西省计算机学校职业游戏,山西省中等职业学校毕业生对口升学信息技术类职业技能考试办法...
- 6FTP 的主动模式(active mode)和被動模式(passive mode)
- 7Linux下SSH服务的搭建_useprivilegeseparation
- 8Android全面检测设备是否模拟器_com.kaopu001.tiantianime
- 9计算机组成原理_01_浮点数转换_代码实现_测试用例_真值转浮点数
- 10GPU多卡并行训练总结（以pytorch为例）
当前位置: article > 正文
uniapp之webscoket聊天 文字/图片/表情/语音_uniapp 聊天组件支持语音,表情,图片,文件
作者：Monodyee | 2024-03-21 03:59:59
赞
踩
uniapp 聊天组件支持语音,表情,图片,文件
、
<image :src=“thead_image” @tap=“tochatset()”>
<view class=“bubble voice” @tap=“playVoice(item.content)” >
<view class=“bubble voice” @tap=“playVoice(item.content)” >
{{val.create_time }}
<image :src=“thead_image” @tap=“tochatset()”>
<view class="bubble voice" @tap="playVoice(val.content)" > <!-- <text class="length">{{item.length}}</text> --> <text class="icon other-voice"></text> </view> </view> </view> </view> </view> <!-- 数据库返回消息 --> <!-- 缓存历史记录 --> <!-- <view v-for="(item, idx) in chatromlist" :key="idx"> <view class="back_msg_list"> <view class="item" v-if='item.type == "text"'> <!-- <view class="time">{{timestampToTime(item.create_time)}}</view> --> <!-- <view class="msg_right" > <image :src="thead_image"></image> <view class="msg_text" v-if="item.length == ''"> <rich-text :nodes="item.content"></rich-text> </view> <view class="msg_text" v-if="item.length != ''"> <view class="bubble voice" @tap="playVoice(item.content)" > <!-- <view class="length">{{item.length}}</view> --> <!-- <view class="icon other-voice"></view> </view> </view> </view> </view> --> <!-- </view> --> <!-- 我发送的信息 --> <!-- <view class="msg_list tototto"> <view class="item" v-if='item.type == "say" '> --> <!-- <view class="time">{{timestampToTime(item.date) }}</view> --> <!-- <view class="msg_right" > <view class="msg_text" v-if="item.length == ''"> <rich-text :nodes="item.content" ></rich-text> </view> --> <!-- 语音 --> <!-- <view class="msg_text" v-if="item.length != ''"> <view class="bubble voice" @tap="playVoice(item.content)" > --> <!-- <view class="length">{{item.length}}</view> --> <!-- <view class="icon my-voice"></view> </view> </view> --> <!-- 语音 --> <!-- <image :src="myhead_image"></image> </view> </view> </view> </view> --> <!-- 聊天记录 --> <!-- //不在线时，返回未读消息 --> <view class="back_msg_list"> <view class="item" v-for="(val,index) in UnreadMessages " :key="index"> <view class="time">{{val.create_time }}</view> <view class="msg_right"> <image :src="thead_image" @tap="tochatset()"></image> <view class="msg_text" v-if="val.length == ''"> <rich-text :nodes="val.content"></rich-text> </view> <view class="msg_text" v-if="val.length != ''"> <view class="bubble voice" @tap="playVoice(val.content)" > <!-- <text class="length">{{item.length}}</text> --> <text class="icon other-voice"></text> </view> </view> </view> </view> </view> <!-- //我收到的信息 --> <view v-for="(item, idx) in ChatRecord" :key="idx"> <view class="back_msg_list"> <view class="item" v-if='item.type == "text"'> <!-- <view class="time">{{timestampToTime(item.create_time)}}</view> --> <view class="msg_right"> <image :src="thead_image" @tap="tochatset()"></image> <view class="msg_text" v-if="item.length == ''"> <rich-text :nodes="item.content"></rich-text> </view> <view class="msg_text" v-if="item.length != ''"> <view class="bubble voice" @tap="playVoice(item.content)" > <!-- <text class="length">{{item.length}}</text> --> <text class="icon other-voice"></text> </view> </view> </view> </view> </view> <!-- 我发送的信息 --> <view class="msg_list tototto"> <view class="item" v-if='item.type == "say" '> <!-- <view class="time">{{timestampToTime(item.date) }}</view> --> <view class="msg_right"> <view class="msg_text" v-if="item.length == '' "> <rich-text :nodes="item.content" ></rich-text> </view> <view class="msg_text" v-if="item.length != '' "> <view class="bubble voice" @tap="playVoice(item.content)" > <text class="icon my-voice"></text> </view> </view> <image :src="myhead_image"></image> </view> </view> <view v-if="item.type!='say'&& imglist !='' "> <view class="item" v-for="(val,inde) in imglist" :key='inde.date'> <!-- <view class="time">{{ val.date}}</view> <view class="msg_right"> <!-- <view class="msg_text"> --> <rich-text :nodes="val.content"></rich-text> <!-- </view> --> <image :src="myhead_image"></image> </view> </view> </view> </view>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
<!-- 我发送的图片 --> <view class="msg_list tototto"> <view class="item" v-for="(val,inde) in imglist" :key='inde'><strong></strong> <view class="msg_right"> <rich-text :nodes="item.content"></rich-text> <image :src="myhead_image" ></image> </view> </view> </view> <!-- 表情栏 --> <view class="emoji-box" :class="showEmji" @touchmove.stop.prevent="discard"> <swiper class="swiper" indicator-dots="true" duration="150"> <swiper-item v-for="(page,pid) in emojiList" :key="pid"> <view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)"> <image mode="widthFix" :src="'http://djdl.chenzhuo.vip/emoji/'+em.url"></image> </view> </swiper-item> </swiper> </view> <!-- 发送的信息 --> <view class="input-box" :class="showEmji" @touchmove.stop.prevent="discard"> <!-- H5下不能录音，输入栏布局改动一下 --> <!-- #ifndef H5 --> <view class="voice"> <view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view> </view> <!-- #endif --> <!-- #ifdef H5 --> <view class="more" @tap="sel_img"> <view class="icon tupian"></view> </view> <!-- #endif --> <view class="textbox"> <view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view> <view class="text-mode" :class="isVoice?'hidden':''"> <view class="box"> <textarea auto-height="true" v-model="textMsg" /> </view> <view class="em" @tap="chooseEmoji"> <view class="icon biaoqing"></view> </view> </view> </view> <!-- #ifndef H5 --> <view class="more" @tap="sel_img"> <view class="icon tupian"></view> </view> <!-- #endif --> <view class="send" :class="isVoice?'hidden':''" @tap="sendText"> <view class="btn"> 发送 </view> </view> </view> <!-- 录音效果(上滑取消) --> <view class="record" :class="recording?'':'hidden'"> <view class="ing" :class="willStop?'hidden':''"><view class="icon luyin2" ></view></view> <view class="cancel" :class="willStop?'':'hidden'"><view class="icon chehui" ></view></view> <view class="tis" :class="willStop?'change':''">{{recordTis}}</view> </view> </view> </view>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/278266
推荐阅读
相关标签
