为了账号安全,请及时绑定邮箱和手机立即绑定

h5微钉-仿钉钉案例html5|仿钉钉聊天项目

2018.09.17 11:19 5277浏览

这几天一直捣鼓钉钉app,于是自己就利用html5+css3+zepto+swiper+weui+wcPop等技术开发了一个仿钉钉办公h5项目,整体效果挺棒哒,分享给大家看看啦。

该聊天项目整体采用flex+rem布局,消息内容区域自动收缩,另外新增了右键长按功能,还有动图表情也是一大亮点。具体实现效果如下:

  • 仿微信的富文本编辑器实现了消息、表情、动图发送

  • 仿QQ群聊多组合图像

  • 可以选择本地图片,并可以图片、视频预览

  • 发红包及打赏功能(点击 “拆” 会有动画旋转效果),有领取红包后的展示页面

  • 类似微信长按消息弹出菜单(会有边界检测)

  • 使用的所有弹窗均为自己研发的wcPop.js插件,在之前的基础上再次新增升级了全屏弹窗(可上、下、左、右 四个方向进入)

  • 经测试,界面UI精致并完美兼容各个手机设备。

https://img2.sycdn.imooc.com/5b9f1cd00001cec403750667.jpg

https://img2.sycdn.imooc.com/5b9f1cd00001ea7e03750667.jpg

https://img1.sycdn.imooc.com/5b9f1cd1000157e303750667.jpg

https://img2.sycdn.imooc.com/5b9f1cd10001a2cc03750667.jpg

https://img2.sycdn.imooc.com/5b9f1cd200013df903750667.jpg

https://img3.sycdn.imooc.com/5b9f1cd20001e46e03750667.jpg

https://img4.sycdn.imooc.com/5b9f1cd200018fed03750667.jpg

https://img3.sycdn.imooc.com/5b9f1cd300014eeb03750667.jpg

https://img3.sycdn.imooc.com/5b9f1cd300010c7203750667.jpg

https://img3.sycdn.imooc.com/5b9f1cd30001cec103750667.jpg

https://img2.sycdn.imooc.com/5b9f1cd400012ac103750667.jpg

https://img1.sycdn.imooc.com/5b9f1cd40001efa103750667.jpg

https://img3.sycdn.imooc.com/5b9f1cd500018c5103750667.jpg

https://img2.sycdn.imooc.com/5b9f1cd50001f3eb03750667.jpg

https://img2.sycdn.imooc.com/5b9f1cd600018efb03750667.jpg

https://img1.sycdn.imooc.com/5b9f1cd60001608003750667.jpg

点击查看更多内容
6人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消