当前位置：首页 > news >正文

【Uni-App】嵌入悬浮球全局组件的详细教程和防踩坑点

news 来源：原创 2025/7/18 5:03:31

一、前言

近期接到一个业务需求是为为h5页面嵌入悬浮球，而且还得是全局化（这样所有页面就可以看见了），在开发的过程中也遇到一些坑，在此和大家一起学习、讨论。

二、准备工作

下载悬浮球组件代码

悬浮球 - DCloud 插件市场

我用的是这一个插件：自由拖拽，吸附在屏幕两侧。

三、实现步骤

1、将组件代码写到项目中。

注意点：这一步主要引入悬浮组件和素材资源

2、全局注册和使用

全局注册 main.js

引入悬浮球组件和全局注册

全局使用 App.vue

<template><view id="app"><!-- 悬浮球组件 --><HoverBall /></view>
</template>

3、启动项目调试，你以为这样就完了...？

这里列举一种情况：启动项目渲染的页面应该是A页面，但结果却是空白页面+悬浮球？

（注意：小红点以及条数是本人新增的功能需求，非本次案例讲解内容）

可能的原因？

在 App.vue 里，除了添加悬浮球组件，还需要确保原有的页面内容能正常渲染。Uni-app 的页面路由是通过 pages 配置文件来管理的，在 App.vue 中要给页面内容留出渲染空间。

加入<router-view> 组件，它会根据当前的路由自动渲染对应的页面。

所以代码应该是

<template><view id="app"><!-- 渲染当前路由对应的页面 --><router-view></router-view><!-- 悬浮球组件 --><HoverBall /></view>
</template>

这样就好了吗...?

这时候发现页面是正常渲染应该加载的页面，但悬浮球却不见了...

（脱敏，已对页面打码）

-问题分析

可能是由于路由跳转时的一些生命周期或者样式覆盖等原因导致的

-解决方案参考

-1. 组件未正确全局注册

确保在 main.js 中已经正确全局注册了 HoverBall 组件。

-2. 样式冲突问题

可能是功能页面的样式覆盖了悬浮球的样式，导致悬浮球不可见。你\可以检查功能页面的样式，特别是 z-index 属性。悬浮球的样式中需要设置一个较高的 z-index 值，确保它始终显示在最上层。

-3. 路由跳转时组件被销毁

在某些情况下，路由跳转可能会导致组件被销毁，从而使悬浮球消失。你可以尝试使用 keep-alive 包裹 router-view，确保组件不会被销毁。

<template><view id="app"><!-- 使用 keep-alive 包裹 router-view --><keep-alive><router-view></router-view></keep-alive><!-- 悬浮球组件 --><HoverBall /></view>
</template><script>
export default {onLaunch() {console.log('App Launch');},onShow() {console.log('App Show');},onHide() {console.log('App Hide');}
};
</script><style>
/* 全局样式 */
page {background-color: #ffffff;
}
</style>

-4. 组件初始化问题

检查 HoverBall.vue 组件中的初始化逻辑，确保在路由跳转后组件能够正常显示。特别是 created 生命周期钩子中的代码，确保获取系统信息等操作不会出现问题。

-本次案例采用：z-index:999

.hover_ball_cell {position: fixed;// overflow: hidden;border-radius: 50%;border: 4upx solid #67c23a;background: #ffffff;transform: translate(-50%, 0);padding: 4upx;display: flex;justify-content: center;align-items: center;z-index: 9999;  //新增
}

四、小结

以上就是一个悬浮球全局使用的教程和防踩坑细节，大家可以根据需求添加新的业务功能，这里提供几个思路：比如悬浮球的信息提示（小红点，而且有显示条数）、点击悬浮球后跳转到对应的信息处理页面等等。

【Uni-App】嵌入悬浮球全局组件的详细教程和防踩坑点

一、前言近期接到一个业务需求是为为h5页面嵌入悬浮球，而且还得是全局化（这样所有页面就可以看见了），在开发的过程中也遇到一些坑，在此和大家一起学习、讨论。二、准备工作下载悬浮球组件代码悬浮球 - DCloud …...

编程日记 2025/7/18 5:03:31

第十六章图

1.为什么要有图前面学了线性表和树线性表局限于一个直接前驱和一个直接后继的关系树也只能有一个直接前驱也就是父节点当我们需要表示多对多的关系时,这里我们就用到了图 import java.util.ArrayList; import java.util.Arrays;public class Graph {private int[][]edg…...

编程日记 2025/7/17 19:04:55

Ubuntu 系统无法远程连接？完整排查指南与解决方案

远程连接 Ubuntu 系统是服务器管理和开发中的常见需求，但有时会遇到无法连接的问题。本文整理常见原因及解决方法，涵盖 SSH 服务配置、防火墙规则、网络设置等关键环节，助您快速定位问题。检查 SSH 服务状态 SSH（Secure Shell）是远程连接的核心服务。若未安装或未运行，…...

编程日记 2025/7/15 11:08:58

将网络安全和第三方风险管理与业务目标相结合

在网络安全风险领域，我们经常遇到与企业语言不通的问题。这可能导致网络安全风险管理计划得不到支持。当发现网络安全风险时，困难在于以符合组织语言和目标的方式来表达它。第三方风险属于另一个灰色地带。在组织内部，许多利益相关者&#…...

编程日记 2025/7/5 9:22:16

加油站小程序实战教程02宫格导航

目录引言1 应用创建2 搭建页面布局3 大模型生成图标最终效果引言在《加油站小程序实战教程01》中我们详细介绍了站点基本信息数据维护功能的搭建。有了数据之后就需要考虑小程序展示部分该如何搭建，本篇我们介绍一下应用的创建、页面布局以及数据绑定的过程。 …...

编程日记 2025/7/17 22:12:54

es6的箭头函数与普通函数的区别，箭头函数的this通常指向哪里，箭头函数可以用作构造函数吗？

ES6 的箭头函数与普通函数的区别箭头函数（Arrow Function）和普通函数有一些重要的区别，主要体现在以下几个方面： 1. 语法简洁性 - 箭头函数的语法更简洁，不需要使用 function 关键字。 - 普通函数需要使用 functi…...

编程日记 2025/7/15 1:12:32

工作记录 2017-03-10

工作记录 2017-03-10 序号工作相关人员 1 修改邮件上的问题。更新RD服务器。郝更新的问题 1、修改了payment detail和patient insurance的health plan的输入方式。 2、new payment detail时，增加了allowable的处理。 3、选择payer的窗体，增…...

编程日记 2025/7/18 4:57:41

如何一键安装所有Python项目的依赖！

在开发项目时，常常需要在多个环境中安装各种依赖。对开发者来说，每次手动一个个安装这些依赖是不是很麻烦？😅 其实有个超简单的办法！只需要一个脚本，就能快速解决问题！💡 这就是我们…...

编程日记 2025/7/16 18:07:31

目录 1. 文件和目录操作 ls ls -l ls -a pwd touch haha.txt mkdir 113 cd . 和 cd .. cd ~ echo "hello world" >> test.c cat test.txt mv rm 2. 压缩与解压 zip test.zip test.c unzip test.zip -d /root/113 tar czf lesson4.tgz less…...

编程日记 2025/7/10 22:09:14

Redis数据持久化机制 + Go语言读写Redis各种类型值

Redis（Remote Dictionary Server）作为高性能的键值存储系统，凭借其丰富的数据类型和原子性操作，成为现代分布式系统中不可或缺的组件。 1、Redis支持的数据类型 Redis支持的数据类型可归纳为以下9类： String&#x…...

编程日记 2025/7/15 1:28:12

HackMyVM-Demons

目录信息搜集漏洞利用提权信息搜集主机发现 ┌──(kali㉿kali)-[~] └─$ nmap -sn 192.168.21.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2025-03-27 23:38 EDT Nmap scan report for 192.168.21.1 (192.168.21.1) Host is up (0.0016s latency). MAC Add…...

编程日记 2025/7/17 4:10:37

Python Random 模块使用完全指南

一、模块基础与核心功能 1. 模块导入与初始化所有随机操作需先导入模块： import random # 标准导入方式 import random as rd # 别名导入（推荐）核心原理：默认基于梅森旋转算法生成伪随机数，可通过random.seed()设…...

编程日记 2025/7/18 5:00:48

前端技术有哪些

一、基础技术 HTML 页面结构标记语言，最新版本为 HTML5。 CSS 样式设计语言，扩展技术包括： CSS 预处理器：Sass、Less、Stylus。CSS 框架：Bootstrap、Tailwind CSS、Bulma。原子化 CSS：Windi CSS、UnoCSS。…...

编程日记 2025/7/16 1:42:45

Python二分查找【清晰易懂】

1. 二分查找是什么？ 想象你在玩“猜数字”游戏： 对方心里想一个 1~100 的数字，你每次猜一个数，对方会告诉你是“大了”还是“小了”。最快的方法：每次都猜中间的数！比如第一次猜50，如果大了&…...

编程日记 2025/7/15 12:08:54

【数据分享】基于联合国城市化程度框架的全球城市边界数据集（免费获取/Shp格式）

在全球城市化进程不断加快的今天，如何精准定义和测量“城市”成为关键问题。不同国家和机构采用不同的标准，导致全球城市化水平的统计结果存在较大差异。同时，由于数据来源分散、标准不统一，获取一套完整、可比的全球城市边界数据…...

编程日记 2025/7/18 4:58:30

ExpTimerApcRoutine函数分析之作用是ActiveTimerListHead里面移除定时器_etimer

第一部分： VOID ExpTimerApcRoutine ( IN PKAPC Apc, IN PKNORMAL_ROUTINE *NormalRoutine, IN PVOID *NormalContext, IN PVOID *SystemArgument1, IN PVOID *SystemArgument2 ) /* Routine Description: This function is the special …...

编程日记 2025/7/18 4:58:31

Linux环境下安装部署Docker

windows下连接Linux： 打开终端： //ssh远程连接 ssh root192.168.xx.xx//输入账号密码 root192.168.xx.xxs password: ssh连接成功！ 安装Docker： //安装Docker yum install -y yum-utils device-mapper-persistent-data lvm2 …...

编程日记 2025/7/16 14:43:33

深度赋能！北京智和信通融合DeepSeek，解锁智能运维无限可能

在数字化飞速发展的今天，传统运维模式面临着设备规模激增、故障复杂度攀升、人工响应滞后等多重挑战。随着DeepSeek、腾讯元宝等AI大模型的兴起，为传统运维模式带来了新的变革。北京智和信通基于DeepSeek大模型技术，将AI和运维场景深度融合&…...

编程日记 2025/7/14 9:31:11

mysql死锁排查解决

今天数据库突然报错[40001][1213] Deadlock found when trying to get lock; try restarting transaction 一看就是死锁阿里实列会显示类似sql:UPDATE goods SET num num - 1 WHERE id2 AND num > 1; 一看sql这不是扣减库存操作吗？ 为什么这sql会出现死锁??…...

编程日记 2025/7/15 1:11:57

Linux | i.MX6ULL 终结者学习指南(1)

01 一光盘资料介绍跟我一起成为嵌入式Linux大佬，开干 02 接下来我们一起学习。 01_开发及烧写工具 （Linux 镜像烧写工具、交叉编译器、裸机镜像制作工具） 1.交叉编译器 （ARM 交叉编译器） 2.裸机镜像制作…...

编程日记 2025/7/11 17:11:31

NX二次开发刻字功能——布尔运算

刻字功能在经历、创建文本、拉伸功能以后就剩下布尔运算了。布尔运算的目的就是实现文本时凸还是凹。这部分内容很简单。 1、首先识别布尔运算的类型，我这里用到一个枚举类型的选项，凸就是布尔求和，凹就是布尔求差。 2、其放置位置为创建拉伸…...

编程日记 2025/7/12 15:58:13

SpringAI与JBoltAI深度对比：从工具集到企业级AI开发范式的跃迁

一、Java生态下大模型开发的困境与需求技术公司的能力断层多数企业缺乏将Java与大模型结合的标准开发范式，停留在碎片化工具使用阶段。大模型应用需要全生命周期管理能力，而不仅仅是API调用。工具集的局限性 SpringAI作为工具集的定位&#xff1…...

编程日记 2025/7/16 18:43:09

JAVASCRIPT 异步函数：底层原理，fetch，promise实例方法then, catich

什么是异步所谓“异步函数”通常指这样一种函数：它在编写时会调用异步 API 并在某个时机（可能是定时、可能是等待网络、也可能是其他操作）把结果“异步”地返回。而“回调函数”是异步函数执行完成后会去调用的函数，也就是“等待…...

编程日记 2025/7/17 4:52:41

docker run -p 5000:5000 my-flask-app

docker run -p 5000:5000 my-flask-app代码的意思是： 运行 my-flask-app 容器，并把 Flask 服务器的 5000 端口映射到本机的 5000 端口。拆解解释 docker run -p 5000:5000 my-flask-app✅ docker run → 运行一个 Docker 容器 ✅ -p 5000:5000 → 端口…...

编程日记 2025/7/12 17:02:22

头文件“stm32f10x.h“与 “stdint.h“和“stdio.h“之间的关系

目录一、#include "stm32f10x.h"包含#include "stdint"吗？ 1、直接包含情况 2、间接依赖情况 3、实际使用建议二、#include "stm32f10x.h"包含#include "stdio.h"吗？ 1、头文件功能与设计目的差异 2、实…...

编程日记 2025/7/14 11:21:37

前端常问的宏观“大”问题详解

HTML5新特性包括那些 HTML5新特性详解 HTML5作为现代网页开发的核心标准，引入了多项革新特性，涵盖语义化标签、多媒体支持、表单增强及新API等，显著提升了网页功能与开发效率。以下是其核心新特性的分类总结：一、语义化标签 HTML5新增了语义化布局标签，替代传统无意义…...

编程日记 2025/7/18 4:47:50

华为机试练习

挑7_牛客题霸_牛客网整数转换为字符串String numStr String.valueOf(str); String有一个contains方法，查看是否包含字符串 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String…...

编程日记 2025/7/18 4:53:19

压力测试未覆盖边界条件的后果有哪些

压力测试未覆盖边界条件可能导致的主要后果包括产品稳定性下降、潜在故障隐患未被识别、用户体验下降及企业信誉受损。其中，最直接且明显的后果是产品稳定性下降。产品在极限或边界条件下通常最容易暴露缺陷，如果压力测试未充分覆盖这些边界条件&#xf…...

编程日记 2025/7/15 13:55:03

编程技术水平横向和垂直发展的抉择全方位分析

文章目录摘要引言一、横向发展的全面分析二、垂直发展的深度剖析三、发展路径的决策模型四、两者结合的协同策略五、行业应用与趋势分析六、结论摘要本文全面分析了编程技术发展中横向扩展与垂直深化的战略抉择。通过系统比较两种发展路径的特点、优势、劣势及应用场景&…...

编程日记 2025/7/15 1:29:18

Docker技术系列文章，第十篇——Docker 集群与编排（以 Kubernetes 为例）

本篇内容作为docker系列的收尾之作，之所以选择本篇作为收尾之作，是因为小编觉得这十篇内容已经满足基础的docker应用中的需求了；关注小编，小编后期还会不定时的更新docker相关的知识点。希望诸君共同努力，都能收获的愈…...

编程日记 2025/7/18 4:25:13

iPhone mini，永远再见了

世界属于多数派，尽管有极少数人对 iPhone mini 情有独钟，但因为销量惨淡，iPhone mini 还是逃不开停产的命运。据 Counterpoint 的数据，iPhone 12/13 mini 两代机型，仅占同期 iPhone 销量的 5%。因为是小屏手机&…...

编程日记 2025/7/18 1:10:39

第五周日志-重新学汇编（2）

机器语言汇编语言(直接在硬件上工作——硬件系统结构）： 1.机器语言每一种微处理器硬件设计和内部结构不同（决定了电信号不同，进而需要不同的机器指令） #早期通过纸带机/卡片机输入计算机，进行运算 2…...

编程日记 2025/7/15 20:05:46

Qt正则表达式QRegularExpression

在 Qt 中，正则表达式是处理文本的强大工具，它能够帮助我们匹配、搜索和替换特定的字符串模式。自 Qt 5 起，QRegularExpression 类提供了对 ECMAScript 标准的正则表达式支持，这使得它在处理各种复杂的字符串任务时变得更加高效和灵…...

编程日记 2025/7/12 20:09:30

Java-servlet（十）使用过滤器，请求调度程序和Servlet线程（附带图谱表格更好对比理解）

Java-servlet（十）使用过滤器，请求调度程序和Servlet线程前言一、Servlet 间通信（了解即可）二、Servlet 请求处理：getAttribute 和 getParameter 的区别与应用1.getAttribute 方法2.getParameter 方法三、…...

编程日记 2025/7/15 8:36:23

【环路补偿】环路补偿的九种类型-mathcad计算书免费下载

环路补偿的九种类型-mathcad计算书免费下载通过网盘分享的文件：环路补偿的9种类型.xmcd 链接: https://pan.baidu.com/s/1QIwsKsbv-WyyYgGc4P1eqg?pwd4sar 提取码: 4sar --来自百度网盘超级会员v3的分享...

编程日记 2025/6/28 3:00:56

【极速版 -- 大模型入门到进阶】LORA：大模型轻量级微调

文章目录 🌊 有没有低成本的方法微调大模型？🌊 LoRA 的核心思想🌊 LoRA 的初始化和 r r r 的值设定🌊 LoRA 实战：LoraConfig参数详解论文指路：LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE M…...

编程日记 2025/6/27 2:40:09

六十天前端强化训练之第三十二天之Babel 转译配置大师级深度讲解

欢迎来到编程星辰海的博客讲解看完可以给一个免费的三连吗，谢谢大佬！ 目录一、核心概念与知识体系详解 1. Babel 工作原理全景解析二、完整配置方案（带详细注释） 1. 进阶版 .babelrc 配置 2. Webpack 集成配置&#xff08…...

编程日记 2025/7/16 23:09:25

nginx部署前端项目（linux、docker）

引言在CentOS 7系统上使用docker安装nginx，使用nginx部署一个由Vue开发、打包的项目 docker安装nginx 这里不多赘述，直接上docker-compose.yml代码 nginx:container_name: nginximage: nginx:1.27.2ports:- "80:80"volumes:- /docker/ngin…...

编程日记 2025/7/12 13:37:22

支付页面安全与E-Skimming防护----浅谈PCI DSS v4.0.1要求6.4.3与11.6.1的实施

关键词：支付页面安全、E-Skimming、PCI DSS v4.0.1、第三方脚本、风险管理、持卡人数据、数据安全、第三方服务提供商、TPSP、内容安全、网页监控、恶意脚本攻击本文为atsec和作者技术共享类文章，旨在共同探讨信息安全的相关话题。转载请注明&#xff…...

编程日记 2025/7/16 16:35:33

配置完nfs后vmware虚拟机下ubuntu/无法联网问题

背景：我在用imx6ull配置完nfs和tftp后，哪怕还原了设置也连不上网，网上的教程都没用，什么配置路由，配置ip，配置什么用户文件，都没用，最后试出来了一个方法，解决问题。方法…...

编程日记 2025/6/28 1:41:31

【含文档+PPT+源码】基于大数据的交通流量预测系统

项目介绍本课程演示的是一款基于大数据的交通流量预测系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。包含：项目源码、项目文档、数据库脚本、软件工具等所有资料带你从零开始部署运行本套系统该项目附带的源码…...

编程日记 2025/7/17 20:43:15

关于Qt的各类问题

目录 1、问题：Qt中文乱码 2、问题：启动时避免ComBox控件出现默认值博客会不定期的更新各种Qt开发的Bug与解决方法,敬请关注! 1、问题：Qt中文乱码问题描述：我在设置标题时出现了中文乱码 this->setWindowTitle("算法…...

编程日记 2025/7/15 11:56:12

Oracle19C的启动及停止

在 Oracle 19c 中，停止和启动数据库实例是常见的操作。以下是详细的步骤，涵盖单实例和 RAC 环境。 1. 停止 Oracle 19c 数据库实例 1.1 使用 SQL*Plus 停止数据库连接到数据库实例： sqlplus / as sysdba 停止数据库： 正常关闭…...

编程日记 2025/7/17 22:46:57

端侧设备（如路由器、家庭网关、边缘计算盒子、工业网关等）的典型系统、硬件配置和内存大小

🏠 家用/工业级边缘设备硬件概览类型常见设备示例CPU 架构内存范围操作系统类型家用路由器TP-Link、小米、华硕、OpenWrtARM Cortex-A7/A964MB～256MBOpenWrt / DD-WRT / Embedded Linux智能家庭网关华为、绿米、天猫精灵、Aqara HubARM Cortex-M/R128MB～512MBEmbedded Lin…...

编程日记 2025/7/16 1:51:15

tcp接发json字符串

因工作需要对接硬件设备,需要通过tcp协议接收发送字符串,而字符串里面全是json字符串,登陆用json对象发送,心跳也用json发送,设备检测到信号后自动推送的也是json字符串,只要登陆后心跳就要每过10秒发送一次,而信号的推送则是在登陆后的任意时间发生.每个json与json之间没有换行…...

编程日记 2025/7/9 13:50:48

string模拟实现-C++

一、目标 string函数是C中常用的库函数，在string中有许多操作函数，对于一些常用的操作函数，我们可以自己模拟实现一下。实现的操作有： 迭代器构造函数拷贝构造函数析构函数赋值运算符重载 c_str() size() [ ]运算符重…...

编程日记 2025/7/17 1:20:43

uni-app AES 加密

uni-app 官网没有加密 API 我们可以安装 crypto-js npm install crypto-js他会保存到项目中 node_modules import CryptoJS from ../node_modules/crypto-js //引用AES源码js const keyCode 012345678 //密钥 const ivCode 012345678 //偏移量const key CryptoJS.enc.Ut…...

编程日记 2025/7/17 1:10:15

【STM32】GPIO输入（按键）

目录一、如何分辨GPIO输入使用什么电频二、输入抖动问题如何消抖三、示例代码一、如何分辨GPIO输入使用什么电频先看原理图即可知道他的初始输入状态需要高电平判断可知使用上拉输入二、输入抖动问题如何消抖电路图中, 按键输入有额外的电容电阻, 是为了消抖消抖方…...

编程日记 2025/7/15 14:10:55

Manus AI 与多语言手写识别技术解析

Manus AI 与多语言手写识别技术解析 Manus AI 是一家专注于人工智能技术的公司，其多语言手写识别技术在多个领域展现了强大的应用潜力。本文将从技术原理、应用场景、优势与挑战等方面，深入解析 Manus AI 的多语言手写识别技术。 1. 技术原理 (1) 手写…...

编程日记 2025/7/16 19:10:58

每日总结3.28

蓝桥刷题 3227 找到最多的数方法一：摩尔投票法 #include <bits/stdc.h> using namespace std; #define int long long signed main() { int n,m; cin>>n>>m; int a[m*n]; for(int i0;i<n*m;i) { cin>>a[i]; } int cand…...

编程日记 2025/7/15 14:16:42