uniapp移动端悬浮按钮(吸附边缘)

news2024/12/23 7:50:49

Uniapp移动端悬浮按钮可以通过CSS实现吸附边缘的效果。具体实现步骤如下:

html:

<movable-area class="movable-area">
			<movable-view class="movable-view" :position="position" :x="x" :y="y" :direction="direction"
				:damping="damping" @change="onChange" @touchend="onTouchend" @click="record">
				<image :src="url+'/uploads/20231209/45a4381a8d120d73e310d10ad5aadc41.png'" mode="widthFix"
					class="iconImage"></image>
			</movable-view>
		</movable-area>

js:

export default {
		data() {
			return {
				x: 364, //x坐标
				y: 700, //y坐标
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				}
			}
		},
		onLoad() {
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			},
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
					}, 1000)
				}
			})
		},
		methods: {
			onChange(e) {
				if (e.detail.source == "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
					console.log(this.x, this.y)
				}, 100)
			}
		}

css:

.iconImage {
        display: block;
        width: 120rpx;
        height: 120rpx;
        animation: iconImage 5s linear infinite;
    }

    @keyframes iconImage {
        0% {
            -webkit-transform: rotate(0deg);
        }

        25% {
            -webkit-transform: rotate(90deg);
        }

        50% {
            -webkit-transform: rotate(180deg);
        }

        75% {
            -webkit-transform: rotate(270deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    .contact {
        width: 50px;
        height: 50px;
        overflow: hidden;
        position: absolute;
        left: 0px;
        top: 0px;
        border-radius: 100%;
        opacity: 0;
    }

    .movable-area {
        height: 100vh;
        width: 750rpx;
        top: 0;
        position: fixed;
        pointer-events: none;
        z-index: 9999999;
    }

    .movable-view {
        width: 96rpx;
        height: 96rpx;
        background-color: #2561EF;
        border-radius: 50%;
        pointer-events: auto;
        position: relative;
        z-index: 9999999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .movable-view image {
        width: 50rpx;
        height: 50rpx;
    }

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

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

相关文章

列出最佳Aspera替代方案,给你执掌数据传输的权

Aspera是一种高速文件传输技术&#xff0c;广泛应用于科学研究、医疗保健、媒体和娱乐等领域。然而&#xff0c;由于Aspera的高昂价格&#xff0c;很多人不得不寻找替代方案。本文将列举最佳Aspera替代方案&#xff0c;以便执掌数据传输的权利。 1、FileZilla FileZilla是一款…

XUbuntu22.04之8款免费UML工具(一百九十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

基于ssm的电动车租赁网站论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本电动车租赁网站就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&…

FreeSSL申请免费域名证书

本文详细讲解如何申请免费证书&#xff0c;需要先准备好域名&#xff0c;将服务器IP和域名绑定。 1、注册FreeSSL账号 网址&#xff1a; https://freessl.org/ 2、申请流程 登录后首页输入域名&#xff0c;然后点击Create certificate&#xff0c;跳转到证书申请页面。 或者…

LLM中的Prompt提示

简介 在LLM中&#xff0c;prompt&#xff08;提示&#xff09;是一个预先设定的条件&#xff0c;它可以限制模型自由发散&#xff0c;而是围绕提示内容进行展开。输入中添加prompt&#xff0c;可以强制模型关注特定的信息&#xff0c;从而提高模型在特定任务上的表现。 结构 …

Ubuntu安装TensorRT

文章目录 1. 安装CUDAa. 下载CUDAb. 安装CUDAc. 验证CUDA 2. 安装CUDNNa. 下载CUDNNb. 安装CUDNNc. 验证CUDNN 3. 安装TensorRTa. 下载TensorRTb. 解压TensorRTc. 安装TensorRTd. 安装uff和graphsurgeone. 验证是否安装成功f. 备注 关注公众号&#xff1a;『AI学习星球』 回复&…

kafka支持外网访问

kafka支持外网访问 1.kafka正常部署之后如果不修改&#xff0c;外网是无法访问的&#xff0c;具体如下&#xff08;这里是单节点&#xff09; 2.这个时候需要修改kafka的config中的server.properties中的 listeners 修改为0.0.0.0 监控所有网卡&#xff0c;advertised.listene…

硬件开发笔记(十五):RK3568底板电路VGA显示接口原理图分析

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/134849296 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

tp5 rewrite nginx重写

tp框架,默认的访问路径是 www.xxxx.com/index.php/admin/shop/index格式的&#xff0c;为了方便和更规范&#xff0c;也看起来有逼格一些&#xff0c;需要将index.php去掉 无index.php就会报404 我这里是宝塔 #地址重写if (!-e $request_filename) {rewrite ^(.*)$ /index.…

解决火狐浏览器拖拽事件打开新页面的问题

产生原因及解决方案 我们在进行拖拽事件的编写时会发现&#xff0c;在火狐浏览器上会发生打开新窗口的问题&#xff0c;这是火狐浏览器的一个特性。 这是因为在 Firefox 中 ondrop 事件会触发 Firefox 自带的拖拽搜索功能&#xff0c;在 ondrop 事件触发执行时触发的函数中加…

【深度挖掘Java性能调优】「底层技术原理体系」深入探索Java服务器性能监控Metrics框架的实现原理分析(Counter篇)

目录 前提概要监控工作可以分为四个部分 监控开发任务Metrics中的基础数据类型计数器&#xff08;Counter&#xff09;统计 API 访问中异常&#xff08;1000/1500&#xff09;的次数统计 API 的调用量统计特定事件发生的次数Counter的底层原理基础 (Base) 计数器单元 (Cell) 数…

MySQL行锁范围分析(行锁、间隙锁、临键锁)

MySQL 中锁的概念 排它锁&#xff08;Exclusive Lock&#xff09; X 锁&#xff0c;也称为写锁&#xff0c;若事务T对对象A加上X锁&#xff0c;则只允许T读取和修改A&#xff0c;其他任何事物都不能再对A 加任何锁&#xff0c;直到T释放A上的锁。 SELECT…FOR UPDATE 对读取的…

SocialSelling社交销售1+5+1方法论系列:社交销售基础思维

社交销售是一个融合系统、个人与组织的营销销售模式&#xff0c;对于企业和销售个体来说&#xff0c;做好这件事首先是理解其次是实操。近期SocialSelling社交销售151方法论系列内容中&#xff0c;我们将对其进行系统阐述。 本篇将侧重151方法论中的第一个“1”&#xff1a;社…

C++ Qt开发:PushButton按钮组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍QPushButton按钮组件的常用方法及灵活运用。 …

【广州华锐互动】AR昆虫在线教学软件:增强现实技术带你近距离探索微观世界

随着科技的不断发展&#xff0c;教育方式也在不断创新。在这个信息爆炸的时代&#xff0c;传统的教育方式已经无法满足人们对知识的渴望。为了让孩子们更好地了解自然界的奥秘&#xff0c;一款名为“AR昆虫在线教学软件”的应用程序应运而生&#xff0c;它将带领孩子们踏上一段…

gpu版本的GNN的demo

1、当涉及到在GPU上运行图神经网络&#xff08;GNN&#xff09;时&#xff0c;通常使用深度学习框架&#xff0c;如PyTorch或TensorFlow。在这里&#xff0c;我将为您提供一个使用PyTorch Geometric库实现GNN的简单示例。 首先&#xff0c;确保您已经安装了PyTorch和PyTorch G…

dockerfile:创建镜像的方式,船舰自定义的镜像

dockerfile&#xff1a;创建镜像的方式&#xff0c;船舰自定义的镜像 包括配置文件&#xff0c;挂载点&#xff0c;对外暴露的端口&#xff0c;设置环境变量 docker创建镜像的方式 1、基于已有镜像进行创建。 根据官方提供的镜像源&#xff0c;创建镜像&#xff0c;然后拉起…

IT鄙视链:码农之间的情感大戏与编程语言间的较量

在IT圈&#xff0c;茶余饭后的谈资总离不开技术、产品、市场和那些看似高深莫测的“鄙视链”。这些鄙视链&#xff0c;就像一场没有硝烟的战争&#xff0c;把原本应该和谐交流的技术社区变成了一场争夺鄙视链顶端的激战。今天&#xff0c;就让我来为您揭示这个神秘的IT鄙视链。…

CSS 实现丝滑动画

效果展示 CSS 知识点 animation 综合运用 页面整体布局 <div class"box"><div class"circle"></div> </div>编写基础样式 .box {position: relative;width: 400px;height: 400px;border: 80px solid transparent;border-left:…

JVM虚拟机系统性学习-类加载子系统

类加载子系统 类加载的时机 类加载的时机主要有 4 个&#xff1a; 遇到 new、getstatic、putstatic、invokestatic 这四条字节码指令时&#xff0c;如果对应的类没有初始化&#xff0c;则要先进行初始化 new 关键字创建对象时读取或设置一个类型的静态字段时&#xff08;被 …