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

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

兼容性:

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

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

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

效果示例:

相关推荐
fakaifa3 小时前
【最新版】龙兵名片V152独立版系统源码+在线更新+搭建教程
小程序·uni-app·开源·php·源码下载·龙兵名片·名片小程序
FFF-X5 小时前
Uni-App 双栏联动滚动组件开发详解 (电梯导航)
uni-app
老白干7 小时前
uniapp工程中解析markdown文件
uni-app
前端_yu小白11 小时前
uniapp配置代理解决跨域问题
uni-app·代理跨域
ABCHERRY711 小时前
uniapp发布成harmony时报错找不到@uni_modules/uni-push包跟这个包@uni_modules/hmr-for-uni-app
前端·uni-app·打包·harmony
浪裡遊13 小时前
我的uniapp自定义模板
开发语言·前端·uni-app·个人开发
奔跑吧邓邓子16 小时前
【商城实战(51)】从uniapp商城到PC端的华丽转身:适配与优化全攻略
uni-app·商城实战·pc端适配
浪裡遊18 小时前
uniapp特有生命周期钩子
前端·vue.js·uni-app
浪裡遊20 小时前
uniapp中的路由、本地存储与网络请求
开发语言·前端·javascript·前端框架·uni-app