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

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

兼容性:

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

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

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

效果示例:

相关推荐
游戏开发爱好者812 小时前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析15 小时前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖19 小时前
uniapp小程序上传图片并压缩
小程序·uni-app
顽疲1 天前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app
The_era_achievs_hero1 天前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
FliPPeDround1 天前
@uni-helper 社区:让 uni-app 拥抱 ESM 时代
前端·uni-app·vite
PedroQue992 天前
@meng-xi/uni-router
uni-app
Stone_zzl2 天前
uniapp写app做测试手机通知栏展示内容
uni-app
顽疲2 天前
从零用java实现 小红书 springboot vue uniapp(15) 集成minio存储 支持本地和minio切换
java·vue.js·spring boot·uni-app
2501_916007472 天前
iOS 抓包工具有哪些?2025实用指南与场景推荐
android·ios·小程序·https·uni-app·iphone·webview