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]…...
软电话通话30秒自动挂断?一文讲透FreeSWITCH通话超时问题
当你满怀期待地搭建好FreeSWITCH,用两个软电话成功呼叫,却发现通话总是在30秒左右莫名其妙地中断——别急,这是SIP新手最常遇到的“经典Bug”。本文将为你抽丝剥茧,彻底解决这个问题,并附带其他可能引发通话异常中断的…...
智能高效的离线OCR解决方案:Umi-OCR从基础到进阶的全方位应用指南
智能高效的离线OCR解决方案:Umi-OCR从基础到进阶的全方位应用指南 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件,适用于Windows系统,支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://gitco…...
Vue.Draggable深度解析:源码实现与高级应用实战
Vue.Draggable深度解析:源码实现与高级应用实战 【免费下载链接】Vue.Draggable SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件,提供了拖放排序功能,可以在 Vue 应用中轻松实现列表元素的可拖拽重排。 项目地…...
微软研究院:让AI在现实世界中越用越聪明的“在线体验学习法“
这项由微软研究院团队完成的研究发表于2026年3月的arXiv预印本数据库,论文编号为arXiv:2603.16856v1。有兴趣深入了解的读者可以通过该编号查询完整论文。这项研究被称为"体验学习系列"的第二部分,第一部分专注于"在线策略情境蒸馏"…...
【综述型文章】人工智能驱动的生物医学多模态数据融合与分析中的挑战
论文总结1、作者总结了挑战:1)数据的挑战-meta元学习和transfering learning迁移学习;2)生物医学模型的可解释性--基于网络结构的可解释性(将通路先验信息等加入到网络结构中,约束网络学习参数)…...
TradingView图表库集成宝典:15+主流框架实战指南
TradingView图表库集成宝典:15主流框架实战指南 【免费下载链接】charting-library-examples Examples of Charting Library integrations with other libraries, frameworks and data transports 项目地址: https://gitcode.com/gh_mirrors/ch/charting-library-…...
2026年智能系统控制、优化与应用国际学术会议(ISCOA 2026)
【重要信息】 会议官网:https://www.yanfajia.com/action/p/2W49G66K 会议时间:2026年10月16-18日 会议地点:中国 成都 截稿日期:2026年6月1日(早鸟优惠咨询) 接收或拒收通知:文章投递后…...
从游戏排行榜到实时榜单:手把手用无旋Treap(Fhq Treap)实现一个高性能排名系统
从游戏排行榜到实时榜单:手把手用无旋Treap(Fhq Treap)实现一个高性能排名系统 在当今的互联网应用中,实时排名系统无处不在——从游戏中的玩家战力榜,到直播平台的礼物贡献榜,再到电商的热销商品排行。这些…...
OpenClaw语音交互方案:nanobot镜像对接语音输入输出
OpenClaw语音交互方案:nanobot镜像对接语音输入输出 1. 为什么需要语音交互能力 作为一个长期使用OpenClaw的技术爱好者,我一直在思考如何让这个强大的自动化工具更加"人性化"。传统的命令行和文本交互方式虽然高效,但对于不擅长…...
长上下文不可强求:从 Gemini 到 Opus,1M context 为什么还没体现出应有价值
长上下文不可强求:从 Gemini 到 Opus,1M context 为什么还没体现出应有价值 摘要 过去一年,long context 一直是大模型产品最容易被拿来宣传的能力之一。32K 不够,就上 128K;128K 还不够,就上 1M。看起来&a…...
