uniapp聊天系统源码,
这篇文章主要介绍了如何利用uniapp模仿微信，实现一个聊天界面。文中的示例代码讲解详细，对我们学习某视频剪辑软件有一定的帮助，感兴趣的可以了解一下
目录
项目演示前言主界面聊天。某视频剪辑软件中引入的射流研究…文件聊天。某视频剪辑软件中引入的组件提交。某视频剪辑软件中引入的组件最后
项目演示
前言
我是看B站的视频一个一个敲的，讲的还不错。可以去看看某视频剪辑软件节点。射流研究…即时通讯聊天室应用开发前端篇
主界面
聊天。某视频剪辑软件
模板
！-聊天界面展示https://www.bilibili.com/video/BV1hT4y1P75N?p=22搭建一和2 -
view class=content
！-聊天内容-
scroll-view class= chat scroll-y= true scroll-with-animation= true :scroll-into-view= scroll to view
view class= chat-main :style= { padding bottom:inputh px }
view class= chat-ls v-for=(item，index)in unshiftmsg :key= index :id= msg index
查看聊天时间项目。创造时间！=“”{ {更改时间(项。创建时间)} }/查看
view class= msg-m msg-left v-if= item。发送名称==朋友名称
image class=user-img src=./././static/logo.png/image
查看 message v-if=item . TextType==0
！-文字-
view class= msg-text { item。发送文本} }/查看
/查看
查看message v-if=item .text type==1 @ tap=预览img(item。发送文本)
！-图像-
image:src= item。发送文本 class= msg-img mode=宽度固定/图像
/查看
查看message v-if=item .text type==2 @ tap=播放语音(item。发送文本。声音)’
！-音频-
view class= msg-text voice :style= { width:item。发送文本。时间* 4 rpx }
图像src=./././静态/图标/热线。png class= voice-img /image
{{item.sendText.time}} "
/查看
/查看
查看message v-if=item .text type==3 @ tap=打开位置(项目。发送文本)
！-位置-
view class=msg-map
view class= map-name"{ item。发送文本。名称} }/查看
view class= map-address { item。发送文本。地址} }/查看
！-如果地图不起作用，就可以直接用一张图片去替代-
map class= map :经度= item。发送文本。经度:纬度=项。发送文本。“纬度”
:markers= covers(item。发送文本)/地图
/查看
/查看
/查看
view class= msg-m msg-right v-if= item。发送姓名！=朋友名
image class=user-img src=./././static/logo.png/image
查看 message v-if=item . TextType==0
view class= msg-text { item。发送文本} }/查看
/查看
查看message v-if=item .text type==1 @ tap=预览img(item。发送文本)
image:src= item。发送文本 class= msg-img mode=宽度固定/图像
/查看
查看message v-if=item .text type==2 @ tap=播放语音(item。发送文本。声音)’
！-音频-
view class= msg-text voice :style= { width:item。发送文本。时间* 4 rpx }
{{item.sendText.time}} "
图像src=./././静态/图标/热线。png class= voice-img /image
/查看
/查看
查看message v-if=item .text type==3 @ tap=打开位置(项目。发送文本)
！-位置-
view class=msg-map
view class= map-name"{ item。发送文本。名称} }/查看
view class= map-address { item。发送文本。地址} }/查看
map class= map :经度= item。发送文本。经度:纬度=项。发送文本。“纬度”
:markers= covers(item。发送文本)/地图
/查看
/查看
/查看
/查看
/查看
/滚动视图
提交@ inputs= inputs @ heights= heights /提交
/查看
/模板
脚本
导入日期时间自./././common/datetimejs’；
导入提交自./././组件/提交/提交。vue ；
//音频播放
const innerAudioContext=uni。createinneraudiocontext()；
导出默认值{
data() {
返回{
朋友名称： xpq ，
消息：[{
sendName: xpq ，
收件人姓名：时光,
发送文本:{
地址: 湖南省岳阳市湘阴县新世纪大道，
纬度:28.68925,
经度:112.90917,
姓名: 湘阴县政府（新世纪大道北),
},
创建时间: 2022-01-06 12:40:12 ，
updateTime: null，
chatmState: 1，
【文本类型】:3
}, {
发送名:时光,
接收名称: xpq ，
发送文本:{
声音: 时光匆匆流过，
时间:2 //秒
},
创建时间: 2022-01-06 12:22:12 ，
updateTime: null，
chatmState: 1，
TextType: 2
}, {
sendName: xpq ，
收件人姓名：时光,
发送文本:{
声音: 谢谢你，
时间:60 //秒
},
创建时间: 2022-01-06 12:00:12 ，
updateTime: null，
chatmState: 1，
TextType: 2
}, {
发送名:时光,
接收名称: xpq ，
发送文本: 这是第九条未读消息，
创建时间: 2022-01-03 12:22:12 ，
updateTime: null，
chatmState: 1，
"文本类型":0
},
{
发送名:时光,
接收名称: xpq ，
发送文本: 这是第八条未读消息，
创建时间: 2022-01-02 12:22:07 ，
updateTime: null，
chatmState: 1，
"文本类型":0
},
{
sendName: xpq ，
接收名称: xpq ，
发送文本: 这是第七条未读消息，
创建时间: 2021-12-19 12:22:03 ，
updateTime: null，
chatmState: 1，
"文本类型":0
},
{
发送名:时光,
接收名称: xpq ，
发送文本: 这是第六条未读消息，
创建时间: 2021-12-19 12:21:58 ，
updateTime: null，
chatmState: 1，
"文本类型":0
},
{
发送名:时光,
接收名称: xpq ，
发送文本: http://演示。愤怒框架。com/attachment/images/2021/11/18/image _ 1637224530 _ diilzlmm。JPEG ，
创建时间: 2021-12-19 12:21:54 ，
updateTime: null，
chatmState: 1，
【文本类型】:1
},
{
sendName: xpq ，
收件人姓名：时光,
发送文本: http://演示2。愤怒框架。com/attachment/images/2021/09/01/image _ 1630483477 _ n 03 w37zs。 jpg ，
创建时间: 2021-12-19 12:21:48 ，
updateTime: null，
chatmState: 1，
"文本类型":1
},
{
发送名:时光,
接收名称: xpq ，
发送文本: 这是第三条未读消息，
创建时间: 2021-12-19 12:21:42 ，
updateTime: null，
chatmState: 1，
"文本类型":0
},
{
发送名:时光,
接收名称: xpq ，
发送文本: 这是第二条未读消息，
创建时间: 2021-12-19 12:21:33 ，
updateTime: null，
chatmState: 1，
"文本类型":0
},
{
发送名:时光,
接收名称: xpq ，
发送文本: http://演示2。愤怒框架。com/attachment/images/2021/09/01/image _ 1630483477 _ n 03 w37zs。 jpg ，
创建时间: 2021-12-19 11:02:18 ，
updateTime: null，
chatmState: 1，
【文本类型】:1
},
{
发送名:时光,
接收名称: xpq ，
发送文本: 爱你啊，
创建时间: 2021-12-18 20:37:03 ，
updateTime: null，
“chatmState”:0，
"文本类型":0
}
],
//反转数据接收
unshiftmsg: []，
imgMsg: []，
scrollToView:" "，
oldTime: new Date()，
输入："60"
}
},
昂秀(){
//数组倒叙主要是应对后端传过来的数据
for(var I=0；我这个。味精。长度；i ) {
//时间间隔处理
if (i this.msg.length - 1) { //这里表示头部时间还是显示一下
设t=日期时间。时空(这个。旧时光，this.msg[i].创造时间)；
如果(t) {
这个。旧时光=t；
}
this.msg[i].创建时间=t；
}
//获取图片，为下面的预览做准备
if (this.msg[i].TextType==1) {
这个。imgmsg。un shift(这个。味精[I]。发送文本)
}
这个。unshiftmsg。un shift(这个。msg[I])；
}
//跳转到最后一条数据与前面的：id进行对照
这个. nextTick(function() {
这个。scrolltoview= msg (这个。unshiftmsg。长度-1)
})
},
组件：{
提交，
},
方法：{
更改时间（日期){
返回日期时间.日期时间1(日期);
},
//进行图片的预览
预览(e) {
设索引=0;
对于(设I=0；我这个。img消息。长度；i ) {
if (this.imgMsg[i]==e) {
index=I；
}
}
console.log(index ，index)
//预览图片
uni.previewImage({
当前：索引，
网址：这个。img消息，
longPressActions: {
项目列表：[发送给朋友, 保存图片, 收藏],
成功：函数（数据){
console.log(选中了第data.tapIndex 1 个按钮，第数据索引1 张图片);
},
失败：函数（错误){
控制台。日志(错误。errmsg)；
}
}
});
},
//音频播放
playVoice(e) {
inneraudiocontext。src=e；
innerAudioContext.onPlay(()={
console.log(开始播放);
});
},
//地图定位
封面(e) {
让map=[{
纬度：东经，
经度：东经，
图标路径： ./././static/logo.png
}]
返回（地图);
},
//跳转地图信息
openLocation(e) {
uni.openLocation({
纬度：东经，
经度：东经，
名称：艺名，
地址：电子邮件地址
成功：函数(){
console.log("成功");
}
});
},
//接受输入内容
输入(e) {
//时间间隔处理
let data={
发送名:时光,
接收名称: xpq ，
“发送文本”:电子邮件，
“创建时间”:新日期(),
“更新时间”:新日期(),
chatmState: 1，
文本类型：电子类型
};
//发送给服务器消息
//onSendWS(JSON。string ify(数据))；
this.unshiftmsg.push(数据);
//跳转到最后一条数据与前面的：id进行对照
这个. nextTick(function() {
这个。scrolltoview= msg (这个。unshiftmsg。长度-1)
})
if (e.type==1) {
这个。imgmsg。推送(e . message)；
}
console.log(e)
},
//输入框高度
高度(e) {
console.log(高度：，e)
这个。inputh=e；
这个。gobottom()；
},
//滚动到底部
goBottom() {
这个。scrolltoview=
这个. nextTick(function() {
这个。scrolltoview= msg (这个。unshiftmsg。长度-1)
})
}
}
}
/脚本
样式lang=scss
页面{
身高：100%;
}。内容{
身高：100%;
背景色：rgba(244，244，244，1)；
}。聊天{
身高：100%;聊天主页{
左填充：32rpx
填充-右：32rpx
垫顶：20rpx
//padding-bottom:120 rpx；//获取动态高度
显示器：flex
伸缩方向：列；
}。聊天-ls {。聊天时间{
字体大小：24r像素；
颜色：rgba(39，40，50，0.3)；
行高：34像素
填充：10rpx 0rpx
文本对齐：居中；
}。消息-m {
显示器：flex
填充：20 rpx 0；用户-img {
弹性：无；
宽度：80rpx
身高：80rpx
边框半径：20rpx
}。消息{
弹性：无；
最大宽度：480rpx
}。消息-文本{
字体大小：32 rpx
颜色：rgba(39，40，50，1)；
行高：44像素
填充：18rpx 24rpx
}。msg-img {
最大宽度：400rpx
边框半径：20rpx
}。消息-地图{
背景：# fff
宽度：464像素
身高：284像素
溢出：隐藏；地图名称{
字体大小：32 rpx
颜色：rgba(39，40，50，1)；
行高：44像素
填充：18rpx 24rpx 0 24rpx
//下面四行是单行文字的样式
显示：-WebKit-box；
-webkit-box-orient:垂直；
-WebKit-line-clamp:1；
溢出：隐藏；
}。地图地址{
字体大小：24r像素；
颜色：rgba(39，40，50，0.4)；
填充：0 24像素
//下面四行是单行文字的样式
显示：-WebKit-box；
-webkit-box-orient:垂直；
-WebKit-line-clamp:1；
溢出：隐藏；
}。地图{
衬垫-顶部：8 rpx
宽度：464像素
身高：190rpx
}
}。声音{
//宽度：200rpx
最小宽度：100rpx
最大宽度：400rpx
}。语音-图像{
宽度：28rpx
高度：36rpx
}
}。消息-左侧{
弯曲方向：行；消息-文本{
左边距：16rpx
背景色：# fff
边框-半径：0 rpx 20 rpx 20 rpx 20 rpx 20 rpx；
}。ms-img {
左边距：16rpx
}。msh-map {
左边距：16rpx
边框-半径：0 rpx 20 rpx 20 rpx 20 rpx 20 rpx；
}。声音{
文本对齐：右对齐；
}。语音-图像{
浮动：左；
变换：旋转(180度);
宽度：28rpx
高度：36rpx
垫底：4r px
}
}。消息-右侧{
弹性-方向：行-反向；消息-文本{
右边距：16rpx
背景色：rgba(255，228，49，0.8)；
边框-半径：20 rpx 0 rpx 20 rpx 20 rpx
}。ms-img {
右边距：16rpx
}。msh-map {
左边距：16rpx
边框-半径：20 rpx 0 rpx 20 rpx 20 rpx
}。声音{
文本对齐：左对齐；
}。语音-图像{
浮动：对；
填充：4rpx
宽度：28rpx
高度：36rpx
}
}
}
}
/风格
chat.vue中引入的js文件
dateTime.js
导出默认值{
//首页时间转化
日期时间（秒){
让旧的=新的日期(e)和：
let now=new Date()；
//获取老的具体时间
设d=旧。gettime()；
设h=旧。get hours()；
设m=老。get minutes()；
设Y=老。获取整年()；
设M=老。getmonth()1；
设D=旧。getdate()；
//获取现在具体时间
设nd=现在。gettime()；
让NH=现在。get hours()；
让n=现在。get minutes()；
让nY=现在。获取整年()；
设nM=现在。getmonth()1；
设nD=现在。getdate()；
//当天的时间
if(D===nD M===nM Y===nY){
如果(h10){
h= 0 h
}
if(m10){
m= 0 m
}
返回h : m；
}
//昨天时间
if(D 1===nD M===nM Y===nY){
如果(h10){
h= 0 h
}
if(m10){
m= 0 m
}
返回昨天h : m；
}否则{
//大于两天
返回y / M / D；
}
},
//聊天时，发送时间处理
日期时间1(e){
让旧的=新的日期(e)和：
let now=new Date()；
//获取老的具体时间
设d=旧。gettime()；
设h=旧。get hours()；
设m=老。get minutes()；
设Y=老。获取整年()；
设M=老。getmonth()1；
设D=旧。getdate()；
//获取现在具体时间
设nd=现在。gettime()；
让NH=现在。get hours()；
让n=现在。get minutes()；
让nY=现在。获取整年()；
设nM=现在。getmonth()1；
设nD=现在。getdate()；
//当天的时间
if(D===nD M===nM Y===nY){
如果(h10){
h= 0 h
}
if(m10){
m= 0 m
}
返回h : m；
}
//昨天时间
if(D 1===nD M===nM Y===nY){
如果(h10){
h= 0 h
}
if(m10){
m= 0 m
}
返回昨天h : m；
}else if( Y==nY){
//今年
如果(h10){
h= 0 h
}
if(m10){
m= 0 m
}
返回 m 月迪日h : m
}否则{
//大于今年
如果(h10){
h= 0 h
}
if(m10){
m= 0 m
}
返回你好年 m 月迪日h : m
}
},
//间隔时间差
时空（旧的，现在的){
旧=新日期（旧);
现在=新日期（现在);
var tell=old。gettime()；
var tnow=现在。gettime()；
如果(告知(tnow 1000*60*5)){
现在返回；
}否则{
返回"";
}
}
}
chat.vue中引入的组件
提交。某视频剪辑软件
模板
视角
视图 class=提交
查看 class=提交-聊天
查看class=bt-img @tap=记录
image :src=toc/image
/查看
！-文本框-
textarea auto-height= true class= chat-send BTN :class= { display none:is record } @ input= inputs
@ focus= focus v-model= msg /textarea
view class= record BTN :class= display none:是记录} @ touch start= touch start @ touch end= touch end
@touchmove=touchmove
按住说话
/查看
view class=bt-img @tap=emoji
图像src=././静态/图标/常见问题。png /图像
/查看
view class=bt-img @tap=more
图像src=././static/icon/news.png/image
/查看
/查看
！-表情-
查看莫吉：class= { display none:isemoji}
view class=emoji-send
view class= e莫吉-发送-检测 @ tap= emojiBack
图像src=././static/icon/左括号。png /图像
/查看
“查看莫吉-发送-Bt”@ tap=e莫吉发送”发送/查看
/查看
表情符号@ emotion= emotion :height= 260 /表情符号
/查看
！-更多-
view class= more :class= { display none:ismore}
view class= more-list @ tap= sendImg( album )
图像src=././static/icon/无接收。png /图像
view class=more-list-title 图片/查看
/查看
view class= more-list @ tap= sendImg( camera )
图像src=././static/icon/无接收。png /图像
view class=more-list-title 拍照/查看
/查看
view class= more-list @ tap= choose location
图像src=././static/icon/无接收。png /图像
view class=more-list-title 定位/查看
/查看
view class=more-list
图像src=././static/icon/无接收。png /图像
view class=more-list-title 视频/查看
/查看
view class=more-list
图像src=././static/icon/无接收。png /图像
view class=more-list-title 文件/查看
/查看
/查看
/查看
view class= voice-BG :class= { display none:voicebg}
view class=voice-bg-len
view class= voice-BG-time :style= { width:vlength/0.6 % }
{{vlength}} "
/查看
view class=voice-del 上滑取消录音/查看
/查看
/查看
/查看
/模板
脚本
//引入组件
从导入表情符号./emoji/emoji.vue
//录音
常量记录器管理器=uni。get recorder manager()；
导出默认值{
data() {
返回{
isrecord: false，
isemoji:假，
更多信息：假的，
语音bg:假的，
佩吉：0,
消息： ,
//直接引用地址可能出不来，需要用需要
目录：要求(././static/icon/allorder.png )，
计时器： ,//计时器
vlength: 0
};
},
组件：{
表情符号，
},
方法：{
//获取高度方法
getElementHeight() {
const query=uni。createselectquery().在（这);
query.select(.提交)。boundingClientRect(data={
这个$emit(heights ，数据。身高)；
}).exec()；
},
//切换音频
记录(){
//切换的时候关闭其他界面
this.ismore=false
this.isemoji=false
//切换高度
setTimeout(()={
这个。getelementheight()；
}, 10)
如果(this.isrecord) {
this.isrecord=false
this.toc=require(././static/icon/allorder。png’)；
}否则{
this.isrecord=true
this.toc=require(././静态/图标/我们聊天。png’)；
}
},
//表情
表情符号(){
this.isemoji=！这个。伊势莫吉；
//切换的时候关闭其功能
this.ismore=false
this.isrecord=false
this.toc=require(././static/icon/allorder。png’)；
//切换高度
setTimeout(()={
这个。getelementheight()；
}, 10)
},
//接收表情
情感(e) {
console.log(e)，
this .味精=this .味精
},
//文字发送
输入(e) {
var chatm=e . detail。价值；
var pos=chatm。的索引( \ n )；
//检索字符串没有数据，返回-1
//if (pos！=-1聊天长度1) {
//这个. emit(inputs ，this。味精)；
//setTimeout(()={
//这个。msg=
//}, 0)
//}
如果(pos！=-1聊天长度1) {
//0为表情和文字
this.send(this.msg，0)
}
},
//输入框聚焦
焦点(){
//关闭其他项
这个。伊势莫吉=假；
this.ismore=false
setTimeout(()={
this.getElementHeight()
}, 10)
},
//表情内发送
表情发送(){
//if (this.msg.length 0) {
//这个. emit(inputs ，this。味精)；
//setTimeout(()={
// this.msg = ;
// }, 0)
// }
if (this.msg.length > 0) {
//0为表情和文字
this.send(this.msg, 0)
}
},
// 表格退格
emojiBack() {
if (this.msg.length > 0) {
this.msg = this.msg.substring(0, this.msg.length - 1);
}
},
//更多功能
more() {
this.ismore = !this.ismore;
//切换的时候关闭其他界面
this.isemoji = false
this.isrecord = false;
this.toc = require("../../static/icon/allorder.png");
setTimeout(() => {
this.getElementHeight();
}, 10)
},
//图片发送
sendImg(e) {
let count = 9;
if (e == album) {
count = 9;
} else {
count = 1;
}
uni.chooseImage({
count: count, //默认9
sizeType: [original, compressed], //可以指定是原图还是压缩图，默认二者都有
sourceType: [e], //从相册选择
// success: function (res) { //用function的方式会找不到send方法
success: (res) => {
console.log(JSON.stringify(res.tempFilePaths));
const filePaths = res.tempFilePaths;
for (let i = 0; i < filePaths.length; i++) {
this.send(filePaths[i], 1)
}
}
});
},
//音频处理
//开始录音
touchstart(e) {
console.log("开始录音")
console.log("点击产生数据", e)
this.pageY = e.changedTouches[0].pageY;
this.voicebg = true;
let i = 1;
this.timer = setInterval(() => {
this.vlength = i;
i++;
console.log("计时器开始工作,第几秒", i)
//结束计时
if (i > 60) {
clearInterval(this.timer);
this.touchend();
}
}, 1000)
recorderManager.start();
},
//删除录音
touchmove(e) {
// console.log("滑动到的y轴高度：",e.changedTouches[0].pageY);
if (this.pageY - e.changedTouches[0].pageY > 100) {
// 关闭录音界面
this.voicebg = false;
}
},
// 结束录音
touchend() {
console.log("结束录音")
clearInterval(this.timer);
recorderManager.stop();
// recorderManager.onStop(function(res) {
recorderManager.onStop((res) => {
let data = {
voice: res.tempFilePath,
time: this.vlength
}
if (this.voicebg) {
this.send(data, 2);
}
// //时长归位
this.vlength = 0;
this.voicebg = false;
console.log(recorder stop + JSON.stringify(res));
// self.voicePath = res.tempFilePath;
});
},
//获取位置
choseLocation() {
uni.chooseLocation({
// success: function(res) {
success: res => {
let data = {
name: res.name,
address: res.address,
latitude: res.latitude,
longitude: res.longitude
}
this.send(data, 3);
// console.log(位置名称： + res.name);
// console.log(详细地址： + res.address);
// console.log(纬度： + res.latitude);
// console.log(经度： + res.longitude);
}
});
},
//发送
send(msg, type) {
let date = {
message: msg,
type: type
}
this.$emit(inputs, date);
setTimeout(() => {
this.msg = ;
}, 0)
}
}
};
</script>
<style lang="scss" scoped>
.submit {
background: rgba(244, 244, 244, 0.96);
border-top: 1px solid rgba(39, 40, 50, 0.1);
width: 100%;
position: fixed;
bottom: 0;
z-index: 100;
// padding-bottom: var(--status-bar-height);
padding-bottom: env(safe-area-inset-bottom);
}
.displaynone {
display: none;
}
.submit-chat {
width: 100%;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 14rpx 14rpx;
image {
width: 56rpx;
height: 56rpx;
margin: 0 10rpx;
flex: auto;
}
.btn {
flex: auto;
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
max-height: 160rpx;
margin: 0 10rpx;
}
.chat-send {
line-height: 44rpx;
}
.record {
line-height: 44rpx;
text-align: center;
font-size: 20rpx;
color: rgba(39, 40, 50, 0.6);
}
}
.emoji {
width: 100%;
height: 460rpx;
background: rgba(236, 237, 238, 1);
box-shadow: 0px 11rpx 0px 0px rgba(0, 0, 0, 0.1);
.emoji-send {
width: 280rpx;
height: 104rpx;
padding-top: 24rpx;
background-color: rgba(236, 237, 238, 0.8);
position: fixed;
// bottom: 0;
bottom: env(safe-area-inset-bottom);
right: 0;
display: flex;
.emoji-send-bt {
flex: 1;
margin: 0 32rpx 0 20rpx;
height: 80rpx;
background: rgba(255, 228, 49, 1);
font-size: 32rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx;
}
.emoji-send-det {
flex: 1;
margin-left: 24rpx;
height: 80rpx;
background: #fff;
font-size: 32rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx;
image {
width: 42rpx;
height: 32rpx;
}
}
}
}
.more {
width: 100%;
height: 436rpx;
background: rgba(236, 237, 238, 1);
box-shadow: 0px 11rpx 0px 0px rgba(0, 0, 0, 0.1);
bottom: env(safe-area-inset-bottom);
padding: 8rpx 20rpx;
box-sizing: border-box;
.more-list {
width: 25%;
text-align: center;
float: left;
padding-top: 32rpx;
image {
width: 72rpx;
height: 72rpx;
padding: 24rpx;
background: rgba(255, 255, 255, 1);
border-radius: 24rpx;
}
.more-list-title {
font-size: 24rpx;
color: rgba(39, 40, 50, 0.5);
line-height: 34rpx;
}
}
}
.voice-bg {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
bottom: 0;
z-index: 1001;
.voice-bg-len {
height: 84rpx;
width: 600rpx;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 42rpx;
text-align: center;
}
.voice-bg-time {
display: inline-block;
min-width: 120rpx;
line-height: 84rpx;
background-color: rgba(255, 228, 49, 1);
border-radius: 42rpx;
}
.voice-del {
position: absolute;
bottom: -480rpx;
width: 100%;
text-align: center;
color: #fff;
font-size: 28rpx;
}
}
</style>
submit.vue中引入的组件
emoji.vue
<template>
<view class="emoji" :style="{height:height+px}">
<view class="emoji-line" v-for="(line,i) in emoji" :key="i">
<view class="emoji-line-item" v-for="(item,index) in line" :key="index" @tap="clickEmoji(item)">{{item}}
</view>
</view>
</view>
</template>
<script>
export default {
props:{
height:{
type:Number,
default:260
}
},
name: "emoji",
data() {
return {
emoji: [
[
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。