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

一、前言

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

二、准备工作

下载悬浮球组件代码

悬浮球 - DCloud 插件市场

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

三、实现步骤

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

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

2、全局注册和使用

全局注册 main.js

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

全局使用 App.vue

html 复制代码
<template>
  <view id="app">
    <!-- 悬浮球组件 -->
    <HoverBall />
  </view>
</template>

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

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

(注意:小红点以及条数是本人新增的功能需求,非本次案例讲解内容)

可能的原因?

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

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

所以代码应该是

html 复制代码
<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,确保组件不会被销毁。

html 复制代码
<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

html 复制代码
.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;  //新增
} 

四、小结

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

相关推荐
十五春会20 小时前
【uniapp】App平台展示pdf文件
pdf·uni-app
请叫我欧皇i21 小时前
保姆级教程vscode创建uniapp vue3+ts+pinia项目并实现自动导入、打包功能
ide·vscode·uni-app
海鸥两三21 小时前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节
知识分享小能手21 小时前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手21 小时前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生1 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
2501_915918411 天前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915909061 天前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
2501_916008892 天前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_915921432 天前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone