uniapp可拖拽消息数徽标draggable-badge,仿手机qq聊天列表未读数徽标动效

组件下载地址:https://ext.dcloud.net.cn/plugin?id=22679

兼容性:

测试了h5和微信小程序,理论支持全平台,暂不支持pc端,不过可以自己修改事件兼容pc

使用uniapp仿写了一个手机qq聊天列表右侧未读数的徽标组件,效果不敢说一模一样,几乎达到了9成

效果:拖拽时有跟随徽标的连接杆及固定点,连接杆及固定点会随着拖拽距离的远近进行缩放,达到最远距离时松开徽标会爆炸,未达到最远距离松开后徽标会返回原点并有抖动效果

效果示例:

相关推荐
Z编程2 小时前
uniapp实现H5页面麦克风权限获取与录音功能
uni-app
傻小胖3 小时前
UniApp 实现兼容 H5 和小程序的拖拽排序组件
小程序·uni-app
谢尔登5 小时前
【uni-app】页面跳转传参
服务器·网络·uni-app
谢尔登9 小时前
【uni-app】axios 报错:Error: Adapter ‘http‘ is not available in the build
网络协议·http·uni-app
Monly219 小时前
Uniapp: 修改启动时的端口号
uni-app
.清和.10 小时前
【uniapp-兼容性处理】swiper在iOS上偶发出现后几张图片白屏情况
uni-app
堕落年代21 小时前
Uniapp当中的async/await的作用
前端·javascript·uni-app
堕落年代1 天前
Uniapp使用onShow语法报before initialization
uni-app
大叔_爱编程1 天前
wx212基于ssm+vue+uniapp的科创微应用平台小程序
vue.js·小程序·uni-app·毕业设计·ssm·课程设计·科创微应用平台小程序
前端开发呀1 天前
无所不能的uniapp拦截器
前端·uni-app