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]…...
终极指南:RealChar语音识别技术深度对比——Whisper、Google Speech与本地部署方案
终极指南:RealChar语音识别技术深度对比——Whisper、Google Speech与本地部署方案 【免费下载链接】RealChar 🎙️🤖Create, Customize and Talk to your AI Character/Companion in Realtime (All in One Codebase!). Have a natural seaml…...
当分包时,主包里有未被引用的文件,小程序预览【代码质量】显示包体积过大,不影响发布
1.项目加入分包后预览时显示主包体积超出?排查分包没问题,外部库方法也不会占很多空间2.代码依赖分析【显示 - 主包体积正常】主包实际体积(768KB)明明远小于 2MB 上限,但工具却提示「主包尺寸应小于 1.5M」且未通过。…...
3天刷完2026最新Java高频面试题(1000 道附答案解析)
2026年金三银四一半儿快要过去了,总结了上半年各类 Java 面试题,初中级和中高级都有,包括 Java 基础,JVM 知识面试题库,开源框架面试题库,操作系统面试题库,多线程面试题库,Tcp 面试…...
OpenOCD配置文件进阶指南:手把手教你定制STM32F0x的swj-dp.tcl脚本
OpenOCD深度定制:STM32F0x调试接口脚本开发实战 嵌入式开发中,调试工具的灵活配置往往决定着开发效率。对于STM32F0x系列芯片而言,OpenOCD作为开源调试工具链的核心组件,其配置文件的可定制性为开发者提供了极大的灵活性。本文将深…...
OpenClaw + 搜索与资讯:让 AI 帮你「刷」信息,告别信息焦虑
你每天花多少时间刷信息流?30分钟?1小时?今天这篇文章,帮你把这段时间降为零。 01 信息过载是现代人的标配焦虑 早上醒来第一件事是什么?很多人已经条件反射地拿起手机,打开微信公众号、知乎、微博、Twitt…...
实战详解:从零构建 LangChain 智能 Agent,让大模型真正“动起来”!
文章目录📖 一、为什么我们需要 Agent?🔄 Agent 核心工作流图解🛠️ 二、环境准备与核心组件核心组件介绍💻 三、实战代码:构建“全能数据分析师”Agent1. 定义工具 (Tools)2. 构建 Agent 逻辑 (ReAct 模式…...
Zrlog面试问答及问题解决方案
面试问答 结合 ZrLog 部署(Maven 构建 环境配置 服务部署)的全流程,整理排查 / 运维 / 开发三类高频问题,覆盖场景、原因、解答思路,可直接用于沟通或故障定位: 一、环境准备阶段高频问题 1. 执行 jav…...
YOLOv8工业部署翻车实录:6类典型报错日志解析,附可直接复用的CI/CD流水线脚本
第一章:YOLOv8工业部署翻车实录:6类典型报错日志解析,附可直接复用的CI/CD流水线脚本模型导出阶段:ONNX Shape Inference 失败 当执行 yolo export modelyolov8n.pt formatonnx opset12 时,常见报错:Runtim…...
GLM-OCR公式识别效果展示:LaTeX格式精准渲染,学术党必备工具
GLM-OCR公式识别效果展示:LaTeX格式精准渲染,学术党必备工具 作为一名经常需要处理学术文献的研究人员,我深知公式识别的痛点。那些复杂的数学表达式,要么手动输入到LaTeX里费时费力,要么用传统OCR工具识别后变成一堆…...
PyTorch 2.8通用镜像实战教程:在/data挂载数据集+models加载权重全流程
PyTorch 2.8通用镜像实战教程:在/data挂载数据集models加载权重全流程 1. 镜像环境概述 PyTorch 2.8深度学习镜像基于RTX 4090D 24GB显卡和CUDA 12.4深度优化,为各类AI任务提供开箱即用的开发环境。这个镜像特别适合需要高性能计算资源的深度学习项目&…...
