DIY可视化-uniapp悬浮菜单支持拖动、吸附-代码生成器

在Uniapp中,悬浮菜单支持拖动和吸附功能,可以为用户带来更加灵活和便捷的操作体验。以下是对这两个功能的详细解释:

悬浮菜单支持拖动

提高用户体验:用户可以根据自己的需要,将悬浮菜单拖动到屏幕上的任意位置,从而更加便捷地访问和使用菜单中的功能。
灵活性:悬浮菜单的拖动功能使得应用界面更加灵活,用户可以根据自己的使用习惯进行个性化设置。
增强互动性:通过拖动悬浮菜单,用户可以与应用进行更加直观的互动,提高应用的趣味性和互动性。


悬浮菜单支持吸附

自动定位:悬浮菜单在拖动到屏幕边缘时,可以自动吸附在边缘位置,使得菜单更加稳定且不易误操作。
优化布局:吸附功能可以使得悬浮菜单在屏幕上的布局更加合理,避免遮挡其他重要信息或功能按钮。
提升美观度:通过自动吸附,悬浮菜单可以保持与屏幕边缘的一定距离,使得整个应用界面看起来更加整洁、美观。

组件库实现

<template><view:id="id"class="diy-floatbar":style="'left: ' + left + 'px; top:' + top + 'px;'"@touchstart="touchstart"@touchmove.stop.prevent="touchmove"@touchend="touchend"@click.stop.prevent="click":class="{transition: isDock && !isMove }"><slot></slot></view>
</template><script>export default {name: 'diy-floatbar',emits: ["click", "dragStart","dragEnd"],props: {id:{type: String,default: 'floatbar'},//默认位置右下角right-bottom、left-bottom、right-top、left-toppositionType:{type: String,default: 'right-bottom'},//是否吸附isDock:{type: Boolean,default: true},//是否包含底部菜单existTabBar:{type: Boolean,default: false},//默认上下偏移topEdge:{type: Number,default: 50},//默认左右偏移leftEdge:{type: Number,default: 10},//刷新页面后保存不变isDragSave:{type: Boolean,default: false}},data() {return {top:0,left:0,width: 0,height: 0,offsetWidth: 0,offsetHeight: 0,windowWidth: 0,windowHeight: 0,isMove: true,edge: 10,}},mounted() {const sys = uni.getSystemInfoSync();this.windowWidth = sys.windowWidth;this.windowHeight = sys.windowHeight;// #ifdef APP-PLUSthis.existTabBar && (this.windowHeight -= 50);// #endifif (sys.windowTop) {this.windowHeight += sys.windowTop;}let windowTop = 0;if (sys.windowTop) {windowTop = sys.windowTop;}const query = uni.createSelectorQuery().in(this);query.select('#'+this.id).boundingClientRect(data => {this.width = data.width;this.height = data.height;this.offsetWidth = data.width / 2;this.offsetHeight = data.height / 2;let left = 0;let top = 0;if(this.positionType=='right-bottom'){left = this.windowWidth - this.width - this.leftEdge;top =  this.windowHeight - this.height - this.topEdge;}else if(this.positionType=='left-bottom'){left = this.leftEdge;top =  this.windowHeight - this.height - this.topEdge;}else if(this.positionType=='right-top'){left = this.windowWidth - this.width - this.leftEdge;top =  this.topEdge+windowTop;}else if(this.positionType=='left-top'){left = this.leftEdge;top =  this.topEdge+windowTop;}if(this.isDragSave){let position = uni.getStorageSync(this.id);if(position){left = position.lefttop = position.top}}this.left = leftthis.top = top}).exec();},methods: {click() {this.$emit('btnClick');},touchstart(e) {this.$emit('dragStart');},touchmove(e) {// 单指触摸if (e.touches.length !== 1) {return false;}this.isMove = true;this.left = e.touches[0].clientX - this.offsetWidth;let clientY = e.touches[0].clientY - this.offsetHeight;// #ifdef H5clientY += this.height;// #endiflet edgeBottom = this.windowHeight - this.height - this.edge;// 上下触及边界if (clientY < this.edge) {this.top = this.edge;} else if (clientY > edgeBottom) {this.top = edgeBottom;} else {this.top = clientY}},touchend(e) {if (this.isDock) {let edgeRigth = this.windowWidth - this.width - this.edge;if (this.left < this.windowWidth / 2 - this.offsetWidth) {this.left = this.edge;} else {this.left = edgeRigth;}}if(this.isDragSave){uni.setStorageSync(this.id,{left:this.left,top:this.top})}this.isMove = false;this.$emit('dragEnd');},}}
</script><style lang="scss">.diy-floatbar {display: flex;justify-content: center;align-items: center;position: fixed;z-index: 999999;&.transition {transition: left .3s ease,top .3s ease;}}</style>

组件库调用

<template><view class="container container329152"><diy-floatbar :topEdge="50" :leftEdge="10" id="floatbar" :isDock="false" :isDragSave="true" positionType="right-bottom"><view class="flex diygw-col-0 right-bottom floatbar-clz"><view class="diygw-grid diygw-actions"><button class="diygw-action"><view class="diygw-grid-inner"><view class="diygw-grid-icon diygw-avatar"><image mode="aspectFit" class="diygw-avatar-img" src="/static/global/grid1.png"></image></view><view class="diygw-grid-title"> 菜单一 </view></view></button></view></view></diy-floatbar><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: { logintype: '0', agree: '0' }};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {}}};
</script><style lang="scss" scoped>.floatbar-clz {bottom: 100rpx;width: 80rpx !important;right: 20rpx;}.floatbar-clz {width: auto !important;height: auto !important;position: initial !important;right: initial !important;left: initial !important;}.container329152 {width: 750rpx !important;margin: 0 auto;}
</style>

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

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

相关文章

微信小程序 - 动画(Animation)执行过程 / 实现过程 / 实现方式

前言 因官方文档描述不清晰,本文主要介绍微信小程序动画 实现过程 / 实现方式。 实现过程 推荐你对照 官方文档 来看本文章,这样更有利于理解。 简单来说,整个动画实现过程就三步: 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法…

Kafka认证时Successfully logged in真的认证成功了?

背景 某个应用需要配置 Kafka 集群信息&#xff0c;且需要在验证集群是否可达。基本实现思路是创建一个生产者对象&#xff0c;然后发送一条测试数据&#xff0c;调用 Producer 的 send 方法发送消息后&#xff0c;再调用 get() 方法&#xff0c;即同步发送消息&#xff0c;测…

基于spootboot学生选课系统设计与实现

资料下载 https://download.csdn.net/download/qq_63753925/89888794 https://download.csdn.net/download/qq_63753925/89888793 https://download.csdn.net/download/qq_63753925/89885091 https://download.csdn.net/download/qq_63753925/89882320 摘 要 近年来&#xf…

机器人转人工时,开启实时质检(mod_cti基于FreeSWITCH)

文章目录 前言联系我们实现步骤1. 修改拨号方案2. 启用拨号方案 前言 在客户与机器人对话中&#xff0c;是不能开启质检功能的。因为机器人识别会与质检识别产生冲突。如果用户想通过机器人转接到人工时&#xff0c;开启质检功能&#xff0c;记录客户与人工之间的对话。应该如…

MySQL史上最全总结

MySQL学习笔记 安装与配置myini文件内容&#xff1a;初始化MySQL: MySQL语法&#xff1a;SQL-DDL数据库1.创建数据库2.查看数据库3.修改4.删除 数据库中的表管理1.创建表2.查找3.修改4.删除5.截断表 SQL-DML1.添加数据1.1插入多条数据1.2表内容复制 2.修改数据3.删除 TRUNCATE和…

Android中的epoll机制

深入理解Android中的epoll机制 在Android系统中&#xff0c;epoll广泛用于高效管理网络和文件的I/O操作。它通过减少CPU资源消耗和避免频繁的内核态-用户态切换&#xff0c;实现了在多连接、多任务环境中的高性能。epoll的特性使其非常适合Android系统中网络服务器、Socket通信…

php伪协议和move_uploaded_file、rename、copy等文件操作

move_uploaded_file、rename、copy 三个函数的区别&#xff1a; move_uploaded_file 函数是专门用于将通过 HTTP 上传的临时文件移动到指定位置的。如果你想要将一个已经存在的文件移动到另一个位置&#xff0c;而不是上传的文件&#xff0c;那么你应该使用 rename 函数或 co…

Java SPI 机制详解

面向对象设计鼓励模块间基于接口而非具体实现编程&#xff0c;以降低模块间的耦合&#xff0c;遵循依赖倒置原则&#xff0c;并支持开闭原则&#xff08;对扩展开放&#xff0c;对修改封闭&#xff09;。然而&#xff0c;直接依赖具体实现会导致在替换实现时需要修改代码&#…

自动驾驶性能分析时,非常有用的两个信息

自动驾驶的关键路径如下&#xff0c;传感器的数据发送给感知模块&#xff1b;感知模块根据传感器数据来确定车辆所处的环境&#xff0c;比如前方有没有障碍物&#xff0c;是不是和车道线保持着适当的距离等&#xff1b;感知处理之后的数据传递给规控模块&#xff0c;规控根据车…

【Spring】Cookie与Session

&#x1f490;个人主页&#xff1a;初晴~ &#x1f4da;相关专栏&#xff1a;计算机网络那些事 一、Cookie是什么&#xff1f; Cookie的存在主要是为了解决HTTP协议的无状态性问题&#xff0c;即协议本身无法记住用户之前的操作。 "⽆状态" 的含义指的是: 默认情况…

【大模型系列】Mini-InternVL(2024.10)

Paper&#xff1a;https://arxiv.org/pdf/2410.16261Github&#xff1a;https://github.com/OpenGVLab/InternVL/tree/main/internvl_chat/shell/mini_internvlAuthor&#xff1a;Zhangwei Gao et al. 上海人工智能实验室 文章目录 0 总结(省流版)1 模型结构1.1 InternViT-300M…

MySQL 数据库备份与恢复全攻略

MySQL 数据库备份与恢复全攻略 引言 在现代应用中&#xff0c;数据库是核心组件之一。无论是个人项目还是企业级应用&#xff0c;数据的安全性和完整性都至关重要。为了防止数据丢失、损坏或意外删除&#xff0c;定期备份数据库是必不可少的。本文将详细介绍 MySQL 数据库的备…

大语言模型数据流程源码解读(基于llama3模型)

文章目录 前言一、数据进入LlamaForCausalLM(LlamaPreTrainedModel)类二、数据进入LlamaModel(LlamaPreTrainedModel)类1、input_ids的embedding编码2、position_ids位置获取3、causal_mask因果mask构建1、causal_mask调用2、因果mask代码解读(_update_causal_mask)4、hidden_s…

Docker镜像的创建、修改与导出

Docker镜像的创建、修改与导出 前言一、创建Docker镜像1. 基于已有镜像创建方法一:修改现有镜像方法二:使用Dockerfile通过源码编译安装nginx二、修改Docker镜像1. 基于已有镜像创建新镜像方法一:修改现有镜像2. 使用`docker commit`命令创建新镜像方法一:提交正在运行的容…

Depcheck——专门用于检测 JavaScript 和 Node.js 项目中未使用依赖项的工具

文章目录 Depcheck 是什麽核心功能&#x1f4da;检测未使用的依赖&#x1f41b;检测缺失的依赖✨支持多种文件类型&#x1f30d;可扩展性 安装与使用1. 安装 Depcheck2. 使用 Depcheck Depcheck 的应用总结项目源码&#xff1a; Depcheck 是什麽 来看一个常见错误场景&#x1…

Sqoop的安装配置及使用

Sqoop安装前需要检查之前是否安装了Tez,否则会产生版本或依赖冲突&#xff0c;我们需要移除tez-site.xml&#xff0c;并将hadoop中的mapred-site.xml配置文件中的mapreduce驱动改回成yarn&#xff0c;然后分发到其他节点&#xff0c;hive里面配置的tez也要移除&#xff0c;然后…

sqoop抽取数据报驱动包不存在的问题

sqoop抽取数据报驱动包不存在的问题 报错示例:需要把相应的jar包放到sqoop的lib目录下: 可以正常查询

SpringBoot后端开发常用工具详细介绍——flyway数据库版本控制工具

文章目录 什么是flyway简介为什么要使用flyway 流程介绍整合springboot添加pom文件配置flyway向resource/db/migration添加sql文件 注意事项1. 迁移报错2. 迁移顺序 参考 什么是flyway 简介 为什么要使用flyway 我们在开发时往往会有这样一种情况&#xff1a; 进行软件开发…

HCIP-HarmonyOS Application Developer V1.0 笔记(一)

HarmonyOS的系统特性 硬件互助&#xff0c;资源共享;一次开发&#xff0c;多端部署;统一OS&#xff0c;弹性部署。 分布式软总线&#xff1a;分布式任务调度、分布式数据管理、分布式硬件虚拟化的基座 18N的独立设备 1个手机&#xff0c;8种设备&#xff08;车机&#xff0c…

深入解析HTTP与HTTPS的区别及实现原理

文章目录 引言HTTP协议基础HTTP响应 HTTPS协议SSL/TLS协议 总结参考资料 引言 HTTP&#xff08;HyperText Transfer Protocol&#xff09;超文本传输协议是用于从Web服务器传输超文本到本地浏览器的主要协议。随着网络安全意识的提高&#xff0c;HTTPS&#xff08;HTTP Secure…