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

组件下载地址:https://ext.dcloud.net.cn/plugin?id=22679
兼容性:
测试了h5和微信小程序,理论支持全平台,暂不支持pc端,不过可以自己修改事件兼容pc

使用uniapp仿写了一个手机qq聊天列表右侧未读数的徽标组件,效果不敢说一模一样,几乎达到了9成
效果:拖拽时有跟随徽标的连接杆及固定点,连接杆及固定点会随着拖拽距离的远近进行缩放,达到最远距离时松开徽标会爆炸,未达到最远距离松开后徽标会返回原点并有抖动效果
效果示例:
在这里插入图片描述在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/37078.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式】策略模式

以下是格式优化后的Markdown文档,仅调整代码缩进,保持内容不变: 四、策略模式 策略(Strategy) 模式是一种行为型模式,其实现过程与模板方法模式非常类似——都 是以扩展的方式支持未来的变化。本章通过对一个具体范例的逐步重构…

STM32配套程序接线图

1 工程模板 2 LED闪烁 3LED流水灯 4蜂鸣器 5按键控制LED 6光敏传感器控制蜂鸣器 7OLED显示屏 8对射式红外传感器计次 9旋转编码器计次 10 定时器定时中断 11定时器外部时钟 12PWM驱动LED呼吸灯 13 PWM驱动舵机 14 PWM驱动直流电机 15输入捕获模式测频率 16PWMI模式测频率占空…

【C语言】使用结构体实现位段

一、位段 前面我们学习了结构体,位段的声明和结构体是一样的,其区别如下: 1、位段的成员必须是int 、unsigned int 、signed int 、在C99中位段的成员的类型也可以选择其他类型。 2、位段的成员名后边有一个冒号和一个数字 如下&#xff…

【大模型系列篇】硅基智能开源数字人模型HeyGem.ai,开启数字人时刻

硅基智能开源数字人模型HeyGem.ai, 1秒克隆生成4K视频, 支持离线多语言, 开源72小时狂揽1.3k星, 目前已经获得3.4k星。 硅基智能正式宣布在GitHub开源全球TOP级数字人模型,同时发布基于该模型的同名数字人工具硅基数字人克隆的本地安装包,这一举措标志着…

【C++】STL库面试常问点

STL库 什么是STL库 C标准模板库(Standard Template Libiary)基于泛型编程(模板),实现常见的数据结构和算法,提升代码的复用性和效率。 STL库有哪些组件 STL库由以下组件构成: ● 容器&#xf…

knowledge-微前端(多个前端应用聚合的一个应用架构体系,每个小的应用可独立运行,独立开发,独立部署上线)

1.前言 微前端,将一个大的前端应用拆分为多个小型的,独立开发的前端应用,每一个小型的应用都可以单独的开发,部署和运行。这种结构允许不同的团队使用不同的技术栈来开发应用的不同部分,提高开发的效率与灵活性。 2.实…

三格电子PLC数据采集网关-工业互联的智能枢纽

在工业自动化领域,设备间的数据互通与协议兼容是核心挑战之一。三格电子推出的PLC据采集网关SG-PLC-Private,凭借其多协议兼容、高稳定性和灵活配置能力,成为工业物联网(IIoT)中实现设备互联的关键设备。本文将从产品功…

鸿蒙NEXT项目实战-百得知识库05

代码仓地址,大家记得点个star IbestKnowTeach: 百得知识库基于鸿蒙NEXT稳定版实现的一款企业级开发项目案例。 本案例涉及到多个鸿蒙相关技术知识点: 1、布局 2、配置文件 3、组件的封装和使用 4、路由的使用 5、请求响应拦截器的封装 6、位置服务 7、三…

leetcode热题100道——字母异位词分组

给你一个字符串数组,请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea", "tan", "ate", "nat", &…

【Vue3】01-vue3的基础 + ref reactive

首先确保已经有了ES6的基础 本文介绍 vue 的基础使用以及 两种响应数据的方式。 目录 1. 创建一个vue应用程序 2. Vue模块化开发 3. ref 和 reactive 的区别 1. 创建一个vue应用程序 所需的两个文件: https://unpkg.com/vue3/dist/vue.global.js https://un…

Linux中的selinux,磁盘管理

一、selinux 作用:通过对软件进程限制某些权限,从而保证系统的安全。通过上下文类型和设定好的上下文类型是否一致。如果一致,那么软件就可以完成后续的操作,例如访问文件中数据,或者让数据通过某个端口。做好个人防护…

Linux应用:Linux的信号

什么是信号 信号是一种软件中断,用于通知进程系统中发生了某种特定事件。它是操作系统与进程之间,以及进程与进程之间进行异步通信的一种方式。在 Linux 系统中,信号是一种比较简单的进程间通信机制。当一个信号产生时,内核会通过…

Linux笔记之Ubuntu22.04安装IBus中文输入法教程

Linux笔记之Ubuntu22.04安装IBus中文输入法教程 code review! 文章目录 Linux笔记之Ubuntu22.04安装IBus中文输入法教程安装 IBus 并配置中文输入法步骤 1: 安装 IBus 和拼音插件步骤 2: 设置 IBus 为默认输入法框架步骤 3: 重启会话步骤 4: 添加中文输入法步骤 5: …

【AIGC前沿】MiniMax海螺AI视频——图片/文本生成高质量视频

目录 1.MiniMax海螺AI视频简介 2.使用教程 1.MiniMax海螺AI视频简介 海螺视频,作为 MiniMax 旗下海螺 AI 平台精心打造的 AI 视频生成工具,致力于助力用户产出高品质视频内容。该工具依托 abab-video-1 模型,具备强大的文生视频功能。用户…

Kubeasz工具快速部署K8Sv1.27版本集群(二进制方式)

文章目录 一、基本信息二、服务器初始化操作三、使用Kubeasz部署K8S集群四、验证集群 一、基本信息 1、部署需要满足前提条件: 注意1:确保各节点时区设置一致、时间同步;注意2:确保在干净的系统上开始安装;注意3&…

在VMware上部署【Ubuntu】

镜像下载 国内各镜像站点均可下载Ubuntu镜像,下面例举清华网站 清华镜像站点:清华大学开源软件镜像站 | Tsinghua Open Source Mirror 具体下载步骤如下: 创建虚拟机 准备:在其他空间大的盘中创建存储虚拟机的目录&#xff0c…

2025年Postman的五大替代工具

虽然Postman是一个广泛使用的API测试工具,但许多用户在使用过程中会遇到各种限制和不便。因此,可能需要探索替代解决方案。本文介绍了10款强大的替代工具,它们能够有效替代Postman,成为你API测试工具箱的一部分。 什么是Postman&…

wow-rag—task5:流式部署

我们希望做一个流式输出的后端,然后让前端去捕获这个流式输出,并且在聊天界面中流式输出。 首先构造流式输出引擎。 # 构造流式输出引擎 query_engine index.as_query_engine(streamingTrue, similarity_top_k3,llmllm)然后生成response_stream&#x…

投资日记_道氏理论技术分析

主要用于我自己参考,我感觉我做事情的时候容易上头,忘掉很多事情。 技术分析有很多方法,但是我个人相信并实践的还是以道氏理论为根本的方法。方法千千万万只有适合自己价值观,习惯,情绪,性格的方法才是好的…

LangChain4j入门指南:Java开发者的AI应用新起点

什么是LangChain和LangChain4j? LangChain是⼀个⼤模型的开发框架,使⽤ LangChain 框架,程序员可以更好的利⽤⼤模型的能⼒,⼤⼤提⾼编 程效率。如果你是⼀个 Java 程序员,那么对 LangChain 最简单直观的理解就是&…