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

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.mzph.cn/news/210936.shtml

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

相关文章

HarmonyOS4.0从零开始的开发教程06常用基础组件

HarmonyOS&#xff08;四&#xff09;常用基础组件 1 组件介绍 组件&#xff08;Component&#xff09;是界面搭建与显示的最小单位&#xff0c;HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件&#xff0c;我们可以使用这些组件轻松的编写出更加丰富、漂亮的界…

代码随想录-刷题第二十二天

235.二叉搜索树的最近公共祖先 题目链接&#xff1a;235. 二叉搜索树的最近公共祖先 思路&#xff1a;根据二叉搜索树的特性&#xff0c;只需要判断当前节点是否在[p,q]范围内就可以&#xff0c;如果在这个范围里&#xff0c;说明当前节点就是其最近公共祖先。 class Soluti…

C语言进阶之路之结构体、枚举关卡篇

目录 一、学习目标 二、组合数据类型-结构体 结构体基本概念 结构体的声明&#xff1a; 小怪实战 结构体初始化 指定成员初始化的好处&#xff1a; 结构体成员引用 结构体指针与数组 关卡BOOS 三、结构体的尺寸 CPU字长 地址对齐 结构体的M值 可移植性 四、联合体…

Java 使用冒号的七种方式

在 Java 中&#xff0c;冒号字符&#xff08;:&#xff09;用于不同的上下文&#xff0c;并根据上下文的不同而具有不同的含义。 以下是 Java 中冒号的一些常用用法&#xff1a; 1、三元运算符 冒号在三元运算符 (? :) 中用作条件、条件为真时要执行的表达式和条件为假时要执…

计算机视觉 基于Open3D了解用于网格和点云邻域分析的KD树和八叉树

一、简述 距离计算和邻域分析是理解网格和点云的形状、结构和特征的重要工具。我们这里要基于一些3D库来提取基于距离的信息并将其可视化。 与深度图或体素相比,点云和网格表示 3D 空间中的非结构化数据。点由它们的 (X, Y, Z) 坐标表示,在 3D 空间中可能彼此靠近的两…

Python数据科学视频讲解:数据清洗、特征工程和数据可视化的注意事项

1.6 数据清洗、特征工程和数据可视化的注意事项 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.6节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应用的全流程…

深入理解HTTP协议中的GET、POST、DELETE和PUT方法

在Web开发中&#xff0c;我们经常需要与服务器进行交互&#xff0c;以获取或发送数据。为了实现这一目标&#xff0c;我们使用HTTP协议。HTTP协议是一种无状态的、应用层的协议&#xff0c;它定义了客户端和服务器之间的通信方式。在HTTP协议中&#xff0c;有四种常用的请求方法…

MN316 OpenCPU丨HTTP使用介绍

HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;即超文本传输协议&#xff0c;是一个简单的请求-响应协议&#xff0c;通常运行在TCP之上&#xff0c;它指定了客户端可能发送给服务器消息类型以及得到什么类型响应。HTTPS&#xff08;Hyper Text Transfer Protoc…

uniapp使用v-html调用接口,富文本图片 视频自适应大小

前端获取到后台数据 不做处理 就会出现下面问题 图片 视频超出视图显示不全 处理 //info 是富文本 <view v-ifinfo v-htmlreplaceWhite(info)></view>调用下面方法 replaceWhite(html) { // 处理富文本默认图片&#xff0c;视频大小let newContent html.replace…

Nestjs联合Typeorm操作Mysql数据库

创建项目 // 安装脚手架(只需要安装一次,因为这个是全局的) npm i -g nestjs/cli // 创建项目 nest new project-name // (该过程有个选择包管理工具的,我选的yarn)启动项目 yarn run start:dev // 可以在浏览器访问localhost:3000 输出helloWorld安装typeorm,mysql2和nestj…

蓝桥小白赛1

&#x1f469;‍&#x1f3eb; 地址 1. 蘑菇炸弹 &#x1f469;‍&#x1f3eb; 蘑菇炸弹 &#x1f389; AC code import java.util.Scanner;public class Main {public static void main(String[] args){Scanner sc new Scanner(System.in);int n sc.nextInt();int[] a …

d8week17

Week7 lec17 TVD去asscess model &#xff08;本质 距离加权平均&#xff09;text 11.2A New Statistic: The Distance between Two Distributions text-11.11.1 数据拿到手&#xff0c;套路操作 -- 看hist分布2 total variation distance lec18lec19 lec17 TVD去asscess model…

使用NCNN在华为M5部署Yolov5

使用NCNN在华为M5平板部署Yolov5 一、NCNN二、下载解压NCNN三、下载ncnn-android-yolov5工程四、下载Android Studio[前提已经配置了jdk版本]1、安装NDK、Cmske&#xff0c;这个必须要安装&#xff0c;2、安装Android 五、构建工程六、修改源码七、重新ysnc project八、安装APP…

MySQL深入——8

Order by语句是如何工作的&#xff1f; 首先我们来创建一个表 CREATE TABLE t (id int(11) NOT NULL,city varchar(16) NOT NULL,name varchar(16) NOT NULL,age int(11) NOT NULL,addr varchar(128) DEFAULT NULL,PRIMARY KEY (id),KEY city (city) ) ENGINEInnoDB; 全字段…

SQL命令---删除数据表

介绍 使用sql语句实现删除数据表。 命令 drop table 表名;

Python实战演练之python实现神经网络模型算法

python实现神经网络模型算法 今天&#xff0c;厾罗和大家分享用Python实现神经网络模型算法&#xff0c;仅用于技术学习交流。 实现技巧 1.导入依赖库 主要是安装相关的依赖库。本文实现的环境为&#xff1a;python 3.7。 from __future__ import division import math …

C语言联合体

联合体 联合体联合体基本概念联合体特点联合体内存结构图 联合体 联合体基本概念 联合体概念&#xff1a; 结构体&#xff08;struct&#xff09;是一种结构体类型或者复杂类型&#xff0c;它可以包含多个类型不同的成员另外一种和结构体非常类似的类型&#xff0c;叫做联合…

GPT-4 变懒了?官方回复

你是否注意到&#xff0c;最近使用 ChatGPT 的时候&#xff0c;当你向它提出一些问题&#xff0c;却得到的回应似乎变得简短而敷衍了&#xff1f;对于这一现象&#xff0c;ChatGPT 官方给出了回应。 译文&#xff1a;我们听到了你们所有关于 GPT4 变得更懒的反馈&#xff01;我…

在HTML中插入音频和视频(详解)

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍在HTML中插入音频和视频以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可以在评论区留言 …

外汇交易中的MT4软件优势:解析软件对交易的影响!

近年来&#xff0c;随着金融科技的不断发展&#xff0c;MT4软件作为外汇交易领域的领先平台&#xff0c;备受交易者青睐。本文将探讨MT4软件在外汇交易中的优势以及对交易的影响&#xff0c;帮助读者深入了解这一交易利器。 ### 1. MT4软件概述 MetaTrader 4(简称MT4)是一款由M…