uniapp封装movable-area+movable-view组件,实现悬浮按钮可拖动,自动吸附边缘效果,自动向两边靠拢
兼容H5、App、微信小程序
子组件
/components/ShopCar/ShopCar.vue
<template><view class="ShopCar"><movable-area class="movableArea" v-if="isShow"><movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction":damping="damping" @change="onChange" @touchend="onTouchend"><view class="icon-box" @click="handleIcon()"><u-icon name="arrow-upward" color="#ff6a00" size="20"></u-icon></view></movable-view></movable-area></view>
</template><script>export default {props: {damping: {type: Number,default: 10},direction: {type: String,default: "all"},position: {type: Number,default: 4},},data() {return {x: 0,y: 0,x1: 0,x2: 0,y1: 0,y2: 0,move: {x: 0,y: 0},isShow: false}},mounted() {uni.getSystemInfo({success: (res) => {this.x1 = 0;this.x2 = parseInt(res.windowWidth) - 50;this.y1 = 0;this.y2 = parseInt(res.windowHeight) - 20;this.$nextTick(() => {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;this.isShow = true})}})},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;this.$nextTick(() => {if (this.move.x < this.x2 / 2) this.x = this.x1;else this.x = this.x2;})},handleIcon() {uni.pageScrollTo({scrollTop: 0,duration: 0,});}},}
</script><style lang="scss" scoped>.ShopCar {.movableArea {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; //设置area元素不可点击,则事件便会下移至页面下层元素z-index: 999;.movableView {width: 70rpx;height: 70rpx;pointer-events: auto;padding: 0 30rpx;.icon-box {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;border: 1rpx solid #ff6a00;box-sizing: border-box;border-radius: 50%;background-color: #fff;animation: iconBox 5s linear infinite; //进行旋转}@keyframes iconBox {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);}}}}}
</style>
父组件
<template><ShopCar v-if="scrollTop>200" />
</template><script>export default {data() {return {scrollTop: 0}},onPageScroll(e) {this.scrollTop = e.scrollTop},}
</script>
相关文章:
uniapp封装movable-area+movable-view组件,实现悬浮按钮可拖动,自动吸附边缘效果,自动向两边靠拢
兼容H5、App、微信小程序 子组件 /components/ShopCar/ShopCar.vue <template><view class"ShopCar"><movable-area class"movableArea" v-if"isShow"><movable-view class"movableView" :position"posi…...
音频重采样(libresample)
https://github.com/minorninth/libresample USB audio同步问题及Jitter分析_usb mic i2s 时钟不同步-CSDN博客 是的,电脑和 USB 摄像头之间的 UAC(USB Audio Class)传输,**可能会因为两边时钟不同步而引起破音问题**。时钟不同…...
使用Python来下一场雪
具体效果:(大雪缓缓下落) 完整代码: import pygame import random# 初始化 Pygame pygame.init()# 设置窗口 width, height 800, 600 screen pygame.display.set_mode((width, height)) pygame.display.set_caption("下雪…...
Pyspark中pyspark.sql.functions常用方法(4)
文章目录 pyspark sql functionsforall 判断array是否满足allfilter 过滤zip_with 数组合并 pyspark sql functions forall 判断array是否满足all df spark.createDataFrame([(1, ["bar"]), (2, ["foo", "bar"]), (3, ["foobar", &…...
Nginx 配置基于IP 地址的 Web 服务器
Nginx 配置基于IP 地址的 Web 服务器 1.配置网卡 nmcli connection modify ipv4.address 192.168.232.130/24 ipv4.gateway 192.168.232.2 ipv4.dns 192.168.232.2 ipv4.method manual connection.autoconnect yes 2.添加ip地址 nmcli connection modify ens160 ipv4.address…...
【TVM 教程】线性和递归核
Apache TVM 是一个端到端的深度学习编译框架,适用于 CPU、GPU 和各种机器学习加速芯片。更多 TVM 中文文档可访问 → https://tvm.hyper.ai/ 作者:Tianqi Chen 下面介绍如何在 TVM 中进行递归计算(神经网络中的典型模式)。 from…...
猫主福利大放送,双11猫奴们的购物狂欢节 养猫必备清单
双十一购物狂欢节终于来啦!铲屎官们是不是已经迫不及待想为心爱的猫咪挑选新玩具和必需品了呢?作为一名资深铲屎官,我专门为大家整理了一份双十一养猫必备清单。抓住这个难得的机会,让我们为猫咪挑选最舒适、最实用的好物吧&#…...
Linux中gcc的使用
GCC的基本概念和用途 GCC(GNU Compiler Collection)是GNU项目提供的一套编程语言编译器集合,包括了C、C、Objective-C、Fortran、Java、Ada和Go等语言的编译器。GCC广泛用于Linux和其他类Unix系统中,用于将源代码编译成可执行文件…...
React 组件 API
React 组件 API React 组件 API 是 React 应用程序开发中的核心部分,它提供了一系列的接口和方法,使得开发者能够创建和管理组件的状态、属性以及生命周期。在本篇文章中,我们将深入探讨 React 组件 API 的各个方面,包括组件的定…...
一个使用接口模式、工厂模式、模板方法模式的日志文件系统
引言: 编写一个与具体业务无关的示例代码。这个示例代码主要体现以下几个设计思想和模式: 接口模式(Interface Pattern):定义接口类,并让具体实现类去实现该接口的功能。 工厂模式(Factory Pa…...
openjdk17 C++源码是怎么给java字段赋值的
##java源码 public class OtherClass {public static int CONSTANT_O9876;public int o1234;public void dddd(){String dddd "dddd";//System.out.println(dddd);System.out.println(ddddCONSTANT_O);}} public int o1234; 在openjdk17中 C源码怎么执行这段代码…...
C++初阶(八)--内存管理
目录 引入: 一、C中的内存布局 1.内存区域 2.示例变量存储位置说明 二、C语言中动态内存管理 三、C内存管理方式 1.new/delete操作内置类型 2.new和delete操作自定义类型 四、operator new与operator delete函数(重要点进行讲解) …...
C# 企业微信机器人推送消息 windows服务应用程序的使用
C# 企业微信机器人推送消息 先添加一个机器人! 然后查看机器人就可以得到一个 webhook 特别特别要注意:一定要保护好机器人的webhook地址,避免泄漏! 然后开始写代码 ,只需要httpPost 调用一下这个地址就可以发送消息了。 首先我…...
社区交流系统设计与实现
社区交流系统设计与实现 1. 系统概述 社区交流系统是一个基于PHP和SQL的Web应用程序,旨在为用户提供一个互动交流的平台。该系统允许用户注册、发布帖子、回复帖子、查看其他用户的帖子和回复,以及管理个人资料,提高用户之间的互动和信息共享…...
【模型学习之路】手写+分析bert
手写分析bert 目录 前言 架构 embeddings Bertmodel 预训练任务 MLM NSP Bert 后话 netron可视化 code2flow可视化 fine tuning 前言 Attention is all you need! 读本文前,建议至少看懂【模型学习之路】手写分析Transformer-CSDN博客。 毕竟Bert是tr…...
Redis学习文档(常见面试题)
目录 Redis回收使用的是什么算法? Redis如何做大量数据插入? 为什么要做Redis分区? 你知道有哪些Redis分区实现方案? Redis分区有什么缺点? Redis持久化数据和缓存怎么做扩容? 分布式Redis是前期做还…...
【C++刷题】力扣-#594-最长和谐子序列
题目描述 和谐数组是指一个数组里元素的最大值和最小值之间的差别 正好是 1 。 给你一个整数数组 nums ,请你在所有可能的子序列中找到最长的和谐子序列的长度。 数组的 子序列是一个由数组派生出来的序列,它可以通过删除一些元素或不删除元素、且不改变…...
MoveIt 控制自己的真实机械臂【2】——编写 action server 端代码
完成了 MoveIt 这边 action client 的基本配置,MoveIt 理论上可以将规划好的 trajectory 以 action 的形式发布出来了,浅浅尝试一下,在 terminal 中运行 roslaunch xmate7_moveit_config_new demo.launch 报错提示他在等待 xmate_arm_control…...
C#制作学生管理系统
定义学生类 定义一个简单的类来表示学生,包括学号、姓名、性别、年龄、电话、地址。再给其添加一个方法利于后续添加方法查看学生信息。 //定义学生类 public class student {public int ID { get; set; }//开放读写权限public string Name { get; set; }public i…...
python Pandas合并(单元格、sheet、excel )
安装 Pandas 和 openpyxl 首先,确保已经安装了 Pandas 和 openpyxl。可以通过 pip 安装: pip install pandas openpyxl 创建 DataFrame import pandas as pd # 创建 DataFrame df1 pd.DataFrame({ 姓名: [张三, 李四, 王五], 年龄: [25, 30, 35]…...
AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
