小程序APP屏幕悬浮按钮可拖动可展开

ops/2024/9/23 4:38:29/

示例:

插件地址:suspensionButton 悬浮按钮 - DCloud 插件市场

使用方式:

javascript">import pxSuspenButton from '@/components/px-suspen-button/index'
javascript">components: { pxSuspenButton },
javascript"><pxSuspenButton :centerIcon="centerIcon" :bgColor="bgColor" :size="size" :turn="turn" :left="left" :top="top":opacity="opacity" @click="clickWindow"></pxSuspenButton>
javascript">export default {data () {return {centerIcon: 'xxxxx.png', //悬浮按钮自定义图片bgColor: 'transparent',size: 160, //悬浮按钮大小turn: false, //点击中心按钮是否展开扇形子菜单,false:禁止展开left: '80%', //悬浮按钮离屏幕左边距离top: '76%', //悬浮按钮离屏幕顶部距离opacity: 1, //悬浮按钮透明度}

我这里只做了点击按钮跳转到指定页面的操作,可根据具体需求进行二次修改

javascript">clickWindow(){let type = 'realName'uni.navigateTo({url: `../operationGuide/operationGuide?type=${type}`})},


http://www.ppmy.cn/ops/19585.html

相关文章

已解决:ModuleNotFoundError : No module named ‘pandas 亲测有效!!!

已解决&#xff1a;ModuleNotFoundError : No module named ‘pandas 亲测有效&#xff01;&#xff01;&#xff01; 亲测有效 报错问题报错原因解决方法 报错问题 当您遇到 ModuleNotFoundError: No module named pandas 错误时&#xff0c;这意味着Python环境中没有安装pan…

【无标题】设备开关指示灯状态智能识别是什么意思---豌豆云

本文将详细解释设备开关指示灯状态智能识别的含义&#xff0c;介绍其工作原理及在各个领域的应用&#xff0c;旨在帮助大家更好地理解这一前沿技术。 随着科技的不断发展&#xff0c;智能化已经成为了现代生活的重要特征。 在设备监控与管理领域&#xff0c;设备开关指示灯状…

react,Chart

一、基础图&#xff1a;https://ant-design-charts.antgroup.com/ Ant Design Charts 1. 首先要下载ant-design/charts&#xff0c;然后在页面中添加如下柱状图代码: import React from react; import { Column } from ant-design/chartsconst DemoColumn: React.FC () …

Docker常用命令(镜像、容器)

一、镜像 1.1 存出镜像 1.2 载入镜像 1.3 上传镜像 二、容器 2.1 容器创建 2.2 查看容器的运行状态 ​2.3 启动容器 2.4 创建并启动容器 2.5 在后台持续运行 docker run 创建的容器 2.6 终止容器运行 2.7 容器的进入 ​2.8把宿主机的文件传入到容器内部 2.9 从容器…

【VSCode调试技巧】Pytorch分布式训练调试

最近遇到个头疼的问题&#xff0c;对于单机多卡的训练脚本&#xff0c;不知道如何使用VSCode进行Debug。 解决方案&#xff1a; 1、找到控制分布式训练的启动脚本&#xff0c;在自己的虚拟环境的/lib/python3.9/site-packages/torch/distributed/launch.py中 2、配置launch.…

【继承和多态】

闭上眼睛&#xff0c;什么都不听.............................................................................................................. 文章目录 前言 一、【继承】 1.1【继承的概念】 1.2【 继承的定义】 1.2.1【定义格式】 1.2.2【继承关系和访问限定符】 1.2…

如何备考华为OD机试?如何刷题以取得高分?常考的算法类型?

华为OD机试通常指的是华为在线开发&#xff08;Onsite Development&#xff09;机试&#xff0c;是华为公司招聘过程中的一项技术测试&#xff0c;主要针对求职者的编程能力和技术水平进行评估。这种机试通常包括编程题和技术题&#xff0c;目的是测试应聘者在实际工作中遇到问…

【Linux】常用命令

1. 切换命令: cd 语法&#xff1a; cd [相对路径或绝对路径] 使用小tips: 输入文件夹名称过程中可以使用Tab来自动不全。 演示效果&#xff1a; 使用了相对路径和绝对路径&#xff0c;可以看到它们的效果是一样的。 2. 创建目录&#xff1a;mkdir 语法&#xff1a; mkdir […