样式集，小程序群聊，聊天室样式，效果图
2024-06-03 11:02:15
效果图 注：（码云 group_chat_yun ）
代码：
<!-- <view class="top"><image class="page_editright" catchtap="navBack" mode="widthFix" src="/images/editright.png"></image><view class="page_name">{{info.groupName}}</view><image class="page_head" catchtap="navDetail" mode="widthFix" src="{{info.groupHead}}"></image>
</view> --><view class="bo"><view class="cgzslj"><image wx:if='{{voice_icon_click}}' class="audi_icon ball" src="/images/audi_icon.png"></image></view><!-- <view class="top_bo"> --><!-- <view bindtap="number">群成员({{userNumber}})</view><view bindtap="upLoad" wx:if="{{prohibit=='0'}}">发图片</view><view bindtap="prohibitTis" wx:if="{{prohibit=='1'}}">发图片</view></view></view> --><view class="tips"><image class="groupHead" catchtap="navDetail" src="{{info.groupHead}}"></image>线上互动交流过程中，请注意保护隐私</view><scroll-view scroll-y="true" bindscrolltoupper="bindscrolltoupper" scroll-with-animation scroll-top="{{scrollTop}}"><block wx:if='{{!list}}'><view class="noList"><view class="noMsg">暂无聊天数据</view></view></block><block wx:else><view class="body" wx:for='{{list}}' wx:key='index'><block wx:if='{{intiMsg?(index>list.length-5):true}}'><view wx:if='{{item.openid==my.openid}}' class="right_body"><view class="flexRoe posRit"><view class="textBo" bindlongtap="deleteitem" id="{{index}}"><view class="dataTime">{{item.name}} {{item.dataTime}}</view><view wx:if="{{item.txt!=''}}" class="ritTxt">{{item.txt}}</view><image wx:if="{{item.type==2}}" bindtap="previewImage" mode='widthFix' data-src='{{item.img}}' src="{{item.img}}" class="textImg"></image><video wx:if="{{item.type==3}}" class="textImg" id="myVideo" src="{{item.video}}" show-center-play-btn='{{false}}' show-play-btn="{{true}}" controls picture-in-picture-mode="{{['push', 'pop']}}" bindenterpictureinpicture='bindVideoEnterPictureInPicture' bindleavepictureinpicture='bindVideoLeavePictureInPicture'></video><view wx:if="{{item.type==4}}" class="ritTxt2" bindtap='my_audio_click' data-src='{{item.voice}}'><image class='my_audio' src='/images/audi_icon2.png'></image><view wx:if="{{item.duration}}" class="ritTxt3">{{item.duration}}S</view></view></view><image class="head" style=" margin-left:20rpx " src="{{item.head}}"></image></view></view><view wx:else class="p_r left_body"><view class="flexRoe "><image class="head" style=" margin-left:20rpx " catchtap="navDetail2" src="{{item.head}}"></image><view class="lfBo"><view class="dataTime">{{item.name}} {{item.dataTime}}</view><view wx:if="{{item.type==1}}" class="lftTxt">{{item.txt}}</view><image wx:if="{{item.type==2}}" bindtap="previewImage" mode='widthFix' data-src='{{item.img}}' src="{{item.img}}" class="textImg"></image><video wx:if="{{item.type==3}}" class="textImg" id="myVideo" src="{{item.video}}" show-center-play-btn='{{false}}' show-play-btn="{{true}}" controls picture-in-picture-mode="{{['push', 'pop']}}" bindenterpictureinpicture='bindVideoEnterPictureInPicture' bindleavepictureinpicture='bindVideoLeavePictureInPicture'></video><view wx:if="{{item.type==4}}" class="lftTxt2" bindtap='my_audio_click' data-src='{{item.voice}}'><image class='my_audio' src='/images/audi_icon2.png'></image><view wx:if="{{item.duration}}" class="ritTxt3">{{item.duration}}S</view></view></view></view></view></block></view></block></scroll-view><view class="sendBlock" wx:if='{{showFile}}'><image class="close" catchtap="close" src="/image/close.png"></image><view class="sbItem" catchtap="upLoad"><text>发送图片</text></view><view class="sbItem" catchtouchstart='voice_ing_start' catchtouchend="voice_ing_end"><text>按住说话</text></view><view class="sbItem" catchtap="upVideo"><text>发送视频</text></view></view><view class="comment"><view class="emoji_block" wx:if='{{emoji_block_show}}'><view wx:for='{{connectemoji}}' catchtap="add_biaoqing" id="{{item}}" class="emoji" wx:key=''>{{item}}</view><image class="add2" catchtap="emoji_block_hide" src="/image/add2.png"></image></view><view class="comment_footer"><view class="biaoqing" catchtap="emoji_block_show">
样式集，小程序群聊，聊天室样式，效果图相关推荐
- 微信小程序实现websocket聊天室
在微信小程序中建立聊天室. 目录 一.在web项目中导入javax.websocket-api-1.0-rc4.jar包 二.编写支持websocket的controller类 三.在微信小程序中编写 ...
- 如何在微信小程序里实现聊天室功能？
准备工作 下载环信 小程序demo+sdkgit clone https://github.com/easemob/webim-weixin-xcx创建一个文件夹,将 demo 中的文件 comps. ...
- Java使用TCP实现群聊 聊天室（多线程和tcp的使用）
一:引言: 显示结果在控制台显示,未能实现图形界面的结合 二:上码 1.服务端 package com.wyj.talkhome; /** * 实现一个用户可以接发多条消息 * * */ import ...
- 【Linux C】简易群聊 聊天室1.0
聊天室简介 本聊天室基于LinuxC进行编写,使用到的有tcp协议.多线程.互斥量.条件变量等知识,实现一个最大可接入20个用户的群聊聊天室:服务端运行后,用户运行用户端接入,输入用户名即可接入: ...
- 微信小程序一个简单聊天室
cha.js // pages/chat/chat.js // 获取小程序实例 let app = getApp(); Page({/*** 页面的初始数据*/data: {nickname:'',a ...
- 微信小程序 swoole简单聊天室
第一步在linux创建php即时通讯文件 <?php //服务器代码 //创建websocket 服务器 $ws = new swoole_websocket_server("0.0. ...
- SpringBoot与webSocket实现在线聊天室——实现私聊+群聊+聊天记录保存
SpringBoot与webSocket实现在线聊天室--实现私聊+群聊+聊天记录保存 引用参考:原文章地址:https://blog.csdn.net/qq_41463655/article/det ...
- 微信小程序-模仿绘制聊天界面
参考文章 1.小程序模仿微信聊天界面 2.微信小程序实现仿微信聊天界面(各种细节处理) 3.微信小程序之页面中关于聊天框三角形的制作和使用 4.仿微信聊天记录时间显示 5.微信小程序-同时获取麦克风. ...
- 微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
最新文章
- 计算机在线作业题,中医大计算机在线作业及答案-20210412090026.docx-原创力文档
- python爬虫---从零开始（一）初识爬虫
- 如何在androidstudio中运行java程序
- 全球及中国皮革和纺织品用甲酸行业竞争调查分析及投资规划报告2021年版
- 互联网1分钟 | 0328 阿里巴巴收购企业协作软件Teambition；完美世界：与谷歌达成战略合作，积极探索VR等新游戏类型...
- 快速构建Windows 8风格应用13-SearchContract构建
- DCMTK：DcmAttributeMatching的单元测试
- python super（）（转载）
- NYOJ88（数论）
- 如何将c语言程序封装供python调用_C++调用python
- 深度解析：Oracle数据库SYSDATE到PostgreSQL数据库最佳转换
- boost::lockfree::queue多线程读写实例
- rabbitmq充分利mysql_牛逼哄哄的 RabbitMQ 到底有啥用？
- 命令关闭手机蓝牙_iPhone手机这些实用的便捷功能，你知道多少？
- pdf python 3.7编程快速入门 潘中强_无python基础，这些书籍可以帮您快速入门。
- java截取utf8字符串_java中常用的字符串的截取方法
- Linux卡巴斯基杀毒（kesl）基础操作
- c语言数学函数库根号程序,数学函数8.2.3次方与开根号C语言入门经典.ppt
- 如何彻底卸载3dmax2020_3DMax如何才能彻底卸载干净啊？
- 基于python的消息轰炸
热门文章