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

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

兼容性:

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

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

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

效果示例:

相关推荐
耶啵奶膘1 小时前
uniapp——地图路线绘制map
uni-app
shadouqi1 小时前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩3 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤5 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端12 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
遗憾随她而去.15 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰19 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
Little_Code1 天前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
儿歌八万首1 天前
uniapp 和原生插件交互
uni-app·交互
儿歌八万首1 天前
UniApp 中实现智能吸顶 Tab 标签导航效果
前端·javascript·uni-app