uniapp封装movable-area+movable-view组件,实现悬浮按钮可拖动,自动吸附边缘效果,自动向两边靠拢

news/2024/11/2 18:53:26/

兼容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>


http://www.ppmy.cn/news/1543941.html

相关文章

Qt的程序如何打包详细教学

生成Release版的程序 在打包Qt程序时&#xff0c;我们需要将发布程序需要切换为Release版本&#xff08;Debug为调试版本&#xff09;&#xff0c;编译器会对生成的Release版可执行程序进行优化&#xff0c;使生成的可执行程序会更小。 debug版本 debug版本是一种开发过程中的…

Python BeautifulSoup 实战案例:抓取网页并提取数据

Python BeautifulSoup 实战案例&#xff1a;抓取网页并提取数据 在数据分析和机器学习领域中&#xff0c;数据是不可或缺的资源。网页数据作为丰富的信息来源&#xff0c;往往需要通过爬虫抓取。Python 的 BeautifulSoup 是处理 HTML 和 XML 的利器&#xff0c;它能够将复杂的…

B站狂神说+mybatis增删改查操作

文章目录 1.新增mapper接口2.修改mapper接口同级目录下的xml文件&#xff08;UserMapper.xml&#xff09;3.编写src同级别目录下的test文件4.万能的Map 1.新增mapper接口 package com.aloha.dao;import com.aloha.pojo.User;import java.util.List;public interface UserMappe…

数据库 示例解析

描述&#xff1a; 找出顾客订单中所花运费比他所下订单平均运费的两倍都还贵的订单号&#xff0c;列出cOrderNo。运费属性名为mShippingCost&#xff0c;顾客号属性为cCustomerID。 代码示例&#xff1a; SELECT o.cOrderNo FROM orders o WHERE o.mShippingCost > (SELE…

个人总结cangjie仓颉程序设计-(一)

文章目录 基本了解注释常用数据类型 常用包基本写法变量定义&初始化数组定义&初始化默认数据类型字符串-数字转换字符-数字转换 本专栏还在持续更新&#xff1a; Cangjie仓颉程序设计-个人总结 这是双子专栏&#xff1a; 仓颉编程cangjie刷题录 基本了解 注释 注释…

LocalDate 类常用方法详解(日期时间类)

LocalDate 类常用方法详解 LocalDate 是 Java 8 引入的日期时间API中的一个类&#xff0c;用于表示不含时间和时区的日期&#xff08;年、月、日&#xff09;。以下是一些常用的 LocalDate 方法&#xff1a; 创建 LocalDate 实例 now()&#xff1a;获取当前日期 LocalDate t…

MySQL企业常见架构与调优经验分享

在企业中,MySQL 数据库的合理架构设计和性能调优至关重要,以下是关于 MySQL 企业常见架构与调优经验的分享: 一、MySQL 企业常见架构 主从复制架构 架构特点:由一个主数据库(Master)和多个从数据库(Slave)组成。主数据库负责写入数据,从数据库复制主数据库的事务日志(…

功能强大视频编辑软件 Movavi Video Editor Plus 2024 v24.2.0 中文特别版

Movavi Video Editor Plus中文修改版是一款功能强大的视频制作编辑软件&#xff0c;使用能够帮助用户快速从录制的素材中制作成一个精美的电影&#xff0c;支持进行视频剪辑&#xff0c;支持添加背影、音乐和各种音乐&#xff0c;软件使用简单&#xff0c;无需任何的经验和专业…