uniapp实现全局悬浮框

uniapp实现全局悬浮框(按钮,页面,图片自行设置) 可拖动
话不多说直接上干货
1,在components新建组件(省去了每个页面都要引用组件的麻烦)
在这里插入图片描述
2,实现代码

<template><view class="call-plate" :style="'top:' + top + 'px;left:' + left + 'px;'" @touchmove="touchmove" @touchend="touchend" @touchstart="touchstart" v-if="popupShow">通话中悬浮框</view>
</template><script>export default {name: "call-screen",emits: ["hide", "confirm"],props: {/*** 默认号码*/number: {type: String,default: ""}},data() {return {popupShow: true, // 是否显示当前页面top: 0,left: 0,startTop: 0,startLeft: 0,startClientTop: 0,startClientLeft: 0,}},watch: {},computed: {i18n() {return this.$t}},created() {let that = thisthis.popupShow = getApp().globalData.callShowthis.top = getApp().globalData.callShowTop // 获取全局存储的位置,也可以使用本地缓存存储this.left = getApp().globalData.callShowLeftuni.$on(getApp().globalData.$global.CALL_SHOW_UPDATE, this.callShowUpdate)uni.$on(getApp().globalData.$global.CALL_SHOW_OPEN, this.callShowOpen)uni.$on(getApp().globalData.$global.CALL_SHOW_CLOSE, this.callShowClose)},destroyed() {// 销毁通知uni.$off(getApp().globalData.$global.CALL_SHOW_UPDATE, this.callShowUpdate)uni.$off(getApp().globalData.$global.CALL_SHOW_OPEN, this.callShowOpen)uni.$off(getApp().globalData.$global.CALL_SHOW_CLOSE, this.callShowClose)},methods: {touchmove(e) {// 单指触摸if (e.touches.length !== 1) {return false;}// console.log(e)this.top = e.changedTouches[0].pageY - this.startClientTop + this.startTopthis.left = e.changedTouches[0].pageX - this.startClientLeft + this.startLeft},touchend(e) {// console.log("------结束,top:" + this.top + ",left:" + this.left)// console.log(e)getApp().globalData.callShowTop = this.topgetApp().globalData.callShowLeft = this.leftuni.$emit(getApp().globalData.$global.CALL_SHOW_UPDATE) // 更新每个页面悬浮框位置},touchstart(e) {// console.log("------开始")// console.log(e)this.startTop = this.topthis.startLeft = this.leftthis.startClientTop = e.changedTouches[0].pageYthis.startClientLeft = e.changedTouches[0].pageX},callShowUpdate() {// 更新每个页面悬浮框位置this.top = getApp().globalData.callShowTopthis.left = getApp().globalData.callShowLeft},callShowOpen() {// 打开每个页面悬浮框this.popupShow = truegetApp().globalData.callShow = true},callShowClose() {// 关闭每个页面悬浮框this.popupShow = falsegetApp().globalData.callShow = false},}}
</script><style lang="scss" scoped>.call-plate {display: flex;position: absolute;width: 90px;height: 160px;z-index: 9999999;background-color: yellow;}
</style>
在 App.vue中全局存储悬浮框位置信息
globalData: {callShowTop: 100, // 悬浮框topcallShowLeft: 100, // 悬浮框leftcallShow: false, // 悬浮框是否显示
},

3,在每个需要用到悬浮框的页面引入

<template><view class="content"><!--组件引用--><call-screen></call-screen></view>
</template>
发通知控制显示隐藏悬浮框
uni.$emit(that.global.CALL_SHOW_CLOSE)
uni.$emit(that.global.CALL_SHOW_OPEN)

4,实现效果
请添加图片描述
每个页面切换后都会更新最新位置

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

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

相关文章

Java架构师之路四、分布式系统:分布式架构、分布式数据存储、分布式事务、分布式锁、分布式缓存、分布式消息中间件、分布式存储等。

目录 分布式架构&#xff1a; 分布式数据存储&#xff1a; 分布式事务&#xff1a; 分布式锁&#xff1a; 分布式缓存&#xff1a; 分布式消息中间件&#xff1a; 分布式存储&#xff1a; Java架构师之路三、网络通信&#xff1a;TCP/IP协议、HTTP协议、RESTful API、We…

【数据分享】中国首套1公里高分辨率大气湿度指数数据集(6个指标\免费获取)

湿度数据是气象学和许多其他领域中至关重要的数据&#xff0c;可用于气象预测与气候研究。之前我们分享过Excel格式和GIS矢量格式&#xff08;均可查看之前的文章获悉详情&#xff09;的2000-2020年全国各城市逐日、逐月和逐年的湿度数据。 本次我们给大家带来的是中国首套1公…

前端常见面试题之react高级特性(Portals、Context、HOC等)

文章目录 1. Portals将子组件渲染到父组件以外的DOM节点上2. Context组件树中传递数据3. react中如何加载异步组件4. shouldComponentUpdate有什么用5. state中值的不可变性6. HOC和Render Props代码复用和逻辑分离7. redux8.React-Redux9. react-reducx异步action 1. Portals将…

【无标题】//创建单向循环链表//创建结点//头插//按位置插入//尾删//按位置删除

1.h头文件 #ifndef __1_H_ #define __1_H_ #include <stdio.h> #include <stdlib.h> typedef int datatype; typedef struct loop_list {union{int len;datatype data;};struct loop_list *next; }loop_list,*loop_p; loop_p create_head(); loop_p create_node(…

【嵌入式学习】QT-Day3-Qt基础

1> 思维导图 https://lingjun.life/wiki/EmbeddedNote/20QT 2> 完善登录界面 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后…

子查询

Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 子查询 前面我们学过了利用 group by子句可以实现分组的操作&#xff0c;主要的统计函数有&#xff1a;COUNT()、AVG()、SUM()、MAX()、MIN() 并且介绍了分组统计查询的若干限制以及在…

设计模式面试系列-03

1. Java 中如何实现模板方法模式? 举例:去餐厅吃饭,餐厅给我们提供了一个模板就是:看菜单,点菜,吃饭,付款,走人。注意这里“点菜和付款”是不确定的由子类来完成的,其他的则是一个模板。 1、先定义一个模板。把模板中的点菜和付款,让子类来实现。 package com.yoo…

IP 协议

IP 协议 .IP协议格式四位版本号四位首部长度8位服务类型16位总长度16位标识符,3位标志位,13位片偏移8位生存时间TTL8位协议16位首部校验和32位源地址 32位目的地址IP地址的组成特殊的IP地址 . IP协议格式 四位版本号 用来表示IP协议的版本,现有的IP协议只有两个版本,IPv4,IPv6…

comfyui节点编写示例文件(下)

** 1、先看示例文件的结构 ** ** 2、设置输入参数 ** ** 3、节点指定任务、输出啥 ** ** 4、这个节点干了啥&#xff0c;定义函数、输出结果 ** ** 5、多个节点&#xff0c;就多个类 ** ** 6、设置多个入口 ** ** 7、放置 ** 直接把py文件放到 .\Co…

PostgreSQL教程(四):高级特性

一、简介 在之前的章节里我们已经涉及了使用SQL在PostgreSQL中存储和访问数据的基础知识。现在我们将要讨论SQL中一些更高级的特性&#xff0c;这些特性有助于简化管理和防止数据丢失或损坏。最后&#xff0c;我们还将介绍一些PostgreSQL扩展。 本章有时将引用教程&#xff0…

消息中间件之RocketMQ为什么写文件这么快?

RocketMQ的存储涉及中&#xff0c;很大一部分是基于Kafka的涉及进行优化的。 PageCache 现代操作系统内核被设计为按照Page读取文件&#xff0c;每个Page默认4KB, 因为程序一般符合局部性原理&#xff0c;所以操作系统在读取一段文件内容时&#xff0c;会将该段内容和附件的文…

Nginx网络服务二-----(虚拟机和location)

一、HTTP设置 1.设置虚拟主机 1.1Nginx 基于域名---虚拟主机 include /apps/nginx/conf.d/*.conf; 1.2Nginx 基于端口---虚拟主机 在做了域名的基础上&#xff0c;按照以下步骤继续 1.3Nginx 基于IP---虚拟主机 2.server下的root root路径格式 指定文件的路径 url …

DataX学习详解

参考视频 02_DataX_概述_哔哩哔哩_bilibili 参考文档 大数据技术之DataX-阿里云开发者社区 介绍 DataX 是阿里巴巴开源的一个 异构数据源 离线 同步工具 致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP&#xff0c;MongDB等各种异构数据源之间…

[python][whl]PyOpenGL轮子文件whl格式所有版本含python3.12版本下载地址汇总

以下PyOpenGL都是windows x64系统使用pyopengl注意对应版本下载&#xff0c;文件名命名规则为&#xff0c;以PyOpenGL-3.1.6-cp312-cp312-win-amd64.whl为例子 PyOpenGL&#xff1a;python模块名称 3.1.6&#xff1a;pyopengl版本号 cp312:表示支持python3.12版本不支持其他…

五、深入学习TensorRT,Developer Guide篇(四)

上一篇文章我们介绍了C的API&#xff0c;这篇文章我们主要针对的是Python的API&#xff0c;起始C和Python在整体流程上面基本一致&#xff0c;但是由于Python天然的简洁性和易用性&#xff0c;Python的API相对来讲还是比较简单的&#xff0c;我们一起来看一下吧。 文章目录 4.…

windows下快速安装nginx 并配置开机自启动

1、下载地址&#xff1a;http://nginx.org/en/download.html 2、启动nginx 注意⚠️ 不要直接双击nginx.exe&#xff0c;这样会导致修改配置后重启、停止nginx无效&#xff0c;需要手动关闭任务管理器内的所有nginx进程。 在nginx.exe目录&#xff0c;打开命令行工具&#xf…

【springblade】springblade(bladeX) 数据权限失效原因分析

文章目录 数据权限接口权限 前言&#xff1a;最近博主在按照bladeX官方文档 配置数据权限 结果发现失效了&#xff0c;网上搜了一下没找到合适的答案&#xff0c;本着求人不如求己的精神&#xff0c;自己调试了一下发现了问题所在&#xff0c;也大致看了一下bladeX的权限逻辑。…

代码随想录算法训练营29期Day56|LeetCode 300,674,718

文档讲解&#xff1a;最长递增子序列 最长连续递增序列 最长重复子数组 300.最长递增子序列 题目链接&#xff1a;https://leetcode.cn/problems/longest-increasing-subsequence/description/ 思路&#xff1a; 设dp[i]表示i之前包括i的以nums[i]结尾的最长递增子序列的长…

unity——shader入门知识点 学习笔记【个人复习向/侵删/有不足之处欢迎斧正】

零、不同图形接口程序对Shader开发的影响&#xff1a; 1.渲染管线(流水线)和图形接口程序的关系&#xff1a;图形接口程序(OpenGL、 DX等)提供了对渲染管线(流水线)的控制和管理功能&#xff0c;它是开发者和硬件打交道的中间层 2. Shader和图形接口程序的关系&#xf…

计算机毕业设计 基于SpringBoot的宠物商城网站系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…