vue实现可拖拽移动悬浮球

封装悬浮球组件,文件名s-icons.vue
<template><div ref="icons" class="icons-container" :style="{ left: left + 'px', top: top + 'px' }"><slot></slot></div>
</template>
<script>
export default {name: 'FloatIcons',props: {// 滚动idscroller: {type: String,default: ''},// 距离上有下左的安全距离padding: {type: String,default: '10 10 10 10'},// 初始位置距离底部的距离bottom: {type: Number,default: 0}},data () {return {timer: null,currentTop: 0,clientWidth: 0,clientHeight: 0,itemWidth: 0,itemHeight: 0,left: null,top: null}},computed: {// 滚动对象,默认空返回windowscrollContainer () {if (this.scroller === '') {return window} else {return document.getElementById(this.scroller)}},// 安全距离safeArea () {return this.padding.split(' ')}},created () {// 屏幕宽度this.clientWidth = document.documentElement.clientWidth// 屏幕高度this.clientHeight = document.documentElement.clientHeight},mounted () {this.$nextTick(() => {// 获取滚动元素this.scrollContainer.addEventListener('scroll', this.handleScrollStart)const div = this.$refs.icons// 获取宽度this.itemWidth = this.$refs.icons.offsetWidththis.itemHeight = this.$refs.icons.offsetHeight// 设置位置this.left = this.clientWidth - this.itemWidth - this.safeArea[1]this.top = this.clientHeight - this.itemWidth - this.bottomdiv.addEventListener('touchstart', () => {div.style.transition = 'none'})div.addEventListener('touchmove', e => {// 阻止默认动作e.preventDefault()if (e.targetTouches.length === 1) {const touch = event.targetTouches[0]this.left = touch.clientX - this.itemWidth / 2this.top = touch.clientY - this.itemHeight / 2}})div.addEventListener('touchend', () => {div.style.transition = 'all 0.3s'// 手指放开left位置if (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth - this.safeArea[1]} else {this.left = this.safeArea[3]}// 手指放开top位置if (this.top < this.safeArea[0]) {this.top = this.safeArea[0]} else if (this.top > this.clientHeight - this.itemHeight - this.safeArea[2]) {// 不低于最低// this.top = this.clientHeight - this.itemHeight - this.safeArea[2]this.top = this.clientHeight - this.itemHeight}})})},beforeDestroy () {this.scrollContainer.removeEventListener('scroll', this.handleScrollStart)},methods: {// 滚动时候执行handleScrollStart () {this.timer && clearTimeout(this.timer)this.timer = setTimeout(() => {this.handleScrollEnd()}, 300)this.currentTop = document.documentElement.scrollTop || document.body.scrollTopif (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth / 2} else {this.left = -this.itemWidth / 2}},handleScrollEnd () {const scrollTop = document.documentElement.scrollTop || document.body.scrollTopif (scrollTop === this.currentTop) {if (this.left > this.clientWidth / 2) {this.left = this.clientWidth - this.itemWidth - this.safeArea[1]} else {this.left = this.safeArea[3]}clearTimeout(this.timer)}}}
}
</script>
<style lang="less" scoped>
.icons-container {display: flex;flex-direction: column;justify-content: center;align-items: center;position: fixed;background: #ffffff;box-shadow: 0px 2px 4px 0px rgba(0, 97, 209, 0.1);border: 1px solid rgba(21, 95, 186, 0.1);// border-radius: 50%;z-index: 1000;transition: all 0.3s;
}
</style>
在封装了一层组件引入s-icons.vue 文件,文件名goToHome.vue
<template><float-icons class="icons-warp" :bottom="bottom" :scroller="scroller"><div class="float-icon-item" @click="goHomeClick"><div class="home-title">返回顶部</div></div></float-icons>
</template>
<script>
import FloatIcons from './s-icons'
export default {components: {'float-icons': FloatIcons},props: {// 滚动idscroller: {type: String,default: ''},// 初始位置距离底部的距离bottom: {type: Number,default: 60}},created () {},methods: {goHomeClick () {// 跳转其他页面// window.history.go(-(window.history.length - 2))// 回到顶部window.scrollTo({top: 0,left: 0,behavior: 'smooth' // 平滑滚动效果})}}
}
</script>
<style lang="less" scoped>
.icons-warp {border-radius: 50%;.float-icon-item {display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;width: 52px;height: 52px;.home-title {font-size: 14px;font-weight: 400;color: #1763bf;}}
}
</style>
最后一步,引入到页面中
<template><div class="main"><h1>顶部</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>11111</h1><h1>底部</h1><GoToHome :bottom="bottom" /></div>
</template><script>
import GoToHome from './goToHome.vue'
export default {data () {return {bottom: 105}},methods: {},components: {GoToHome}
}
</script><style lang="less" scoped>
</style>
相关文章:
vue实现可拖拽移动悬浮球
封装悬浮球组件,文件名s-icons.vue <template><div ref"icons" class"icons-container" :style"{ left: left px, top: top px }"><slot></slot></div> </template> <script> export …...
立体库堆垛机的精密构造与功能(收藏版)
导语 大家好,我是社长,老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 在现代物流仓储体系中,堆垛机以其高效、精准的操作能力,成为了自动化存储与检索系统的关键所在。 其复杂的构造和多样化的…...
算法提高之你能回答这些问题吗
算法提高之你能回答这些问题吗 核心思想:线段树 用sum,lmax,rmax,tmax分别存线段长度,最大前缀,最大后缀,最大子段和 #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N 500010;int n,m;int w[N];s…...
C++-指针
在C中,指针是至关重要的组成部分。它是C语言最强大的功能之一,也是最棘手的功能之一。 指针具有强大的能力,其本质是协助程序员完成内存的直接操纵。 指针:特定类型数据在内存中的存储地址,即内存地址。 指针变量的定…...
Three.js 研究:2、如何让动画线性运动
1、默认的动画含有加速度并非线性的 制作好的动画很明显是非线性的,这是一个运动环,为了让环运行线性进行如下设置。 2、设置动画成为线性动画...
z3-加法器实验
补码器加减法,运算方法简介 我们要知道什么是补码的加法,我们为什么要用补码的加法? 补码的加法其实就是将两个补码形式的二进制数字直接相加,处理的时候忽略超出固定位数的进位。补码的加法运算和无符号二进制数的加法操作一样&…...
解决git克隆项目出现fatal无法访问git clone https://github.com/lvgl/lvgl.git
Windows 11系统 报错 $ git clone https://github.com/lvgl/lvgl.git Cloning into lvgl... fatal: unable to access https://github.com/lvgl/lvgl.git/: Failed to connect to github.com port 443 after 21141 ms: Couldnt connect to server 解决方法 git运行这两段代码…...
Vue中引入组件需要哪三步
在Vue中引入组件通常需要以下三步: 导入组件:首先,你需要在父组件中导入你想要使用的子组件。这通常是通过ES6的import语法完成的。 注册组件:接下来,你需要在父组件中注册这个子组件。这可以通过components选项完成&…...
到底该用英文括号还是中文括号?
这篇博客写的还挺详细的,不错。...
一个普通双非女生的秋招之路
大家好,我是小布丁。 先简单地做个自我介绍: 我今年本科毕业于某双非院校(属于那种没什么人听说过的小学校),学的是计算机专业,英语四级水平(没办法,六级确实没过)。我本…...
一个模型用了几层神经网络怎么算?
有权重参数的层算作一层,没有权重参数的就是参数不更新,不能称之为一层 有权重:卷积层、全连接层 没有权重的层:激活函数层、池化层 即数卷积层和全连接层的个数,就是这个模型用了几层神经网络。...
python获取cookie的方式
通过js获取cookie,避免反复登录操作。 经验证在JD上没有用,cookie应该无痕或者加密了,只能用单浏览器不关的模式来实现,但是代码留着,其他网站可能有用。 def cookie_set():driver webdriver.Chrome(optionschrome_…...
Nginx-狂神说
Nginx概述 公司产品出现瓶颈? 我们公司项目刚刚上线的时候,并发量小,用户使用的少,所以在低并发的情况下,一个jar包启动应用就够了,然后内部tomcat返回内容给用户。 但是慢慢的,使用我们平台…...
Python筑基之旅-运算符
目录 一、运算符 1、了解定义 2、理解意义 2-1、基本数据处理 2-2、条件判断 2-3、逻辑操作 2-4、赋值和更新 2-5、位操作 2-6、提高代码可读性 2-7、解决实际问题 2-8、学习其他编程语言的基础 3、探索方法 3-1、理解概念 3-2、练习基本运算 3-3、掌握优先级 …...
【Text2SQL】Spider 数据集
论文:Spider: A Large-Scale Human-Labeled Dataset for Complex and Cross-Domain Semantic Parsing and Text-to-SQL Task ⭐⭐⭐⭐⭐ EMNLP 2018, arXiv:1809.08887 Dataset: spider GitHub: github.com/taoyds/spider 一、论文速读 本文提出了 Text2SQL 方向的…...
语雀——云知识库/笔记
对于日常进行学习/创作或是记录学习、工作内容与心得的群体来说,能够及时同步的云笔记应用有着广泛的应用场景。近期,我也探索了许多款不同的软件应用,今天来分享一款很有特点的应用——语雀。 语雀,为每一个人提供优秀的文档和知…...
Java学习:电影查询简单系统
1.创建一个movice的对象来存放电影 里面设置构造器(有参和无参) package com.movie;public class movice {//创建一个movice的对象存放电影private int id;private String name;private double price;private double score;private String diector;pri…...
在Mac电脑下怎么部署QAnything?
在Mac电脑下部署QAnything,可以选择使用纯Python环境进行部署,这种方式不依赖GPU,适合在Mac等笔记本电脑上运行。以下是基于QAnything的纯Python环境安装教程的步骤[18]: 安装要求 Python 3.10(建议使用Anaconda3来管…...
单条16g和双条8g哪个好
单条16g和双条8g各有优劣,具体选择要根据个人需求和电脑配置来决定。 以下是一些参考信息: •单条16g内存的价格比双条8g内存的价格低,而且16g的内存容量大,一条内存十分的方便。 •两条8g内存可以组成双通道,电脑运行速度要快一些。 •对于普通使用电脑的人群与热衷于…...
Microsoft VBA Excel 去重小工具
问题简述 在本工作表中,A1:B3单元格样式如下,通过名称管理器B列的单元格被命名为"LinkFile"、“SheetName”、“InputArea”,请实现以下功能:读取Excel文件中的数据,去除重复的数据,并记录每个数…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...
