uniapp手机端可移动悬浮球组件实现

低级前端

已于 2023-08-25 23:06:29 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uni-app javascript 开发语言 vue.js 前端

于 2023-04-05 14:19:03 首次发布

本文链接：https://blog.csdn.net/weixin_44632398/article/details/129970321

uniapp 专栏收录该内容

15 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

文章介绍了如何使用uniapp框架中的movable-area和movable-view组件来创建一个可拖动的悬浮球。通过设置组件属性和样式，实现了在手机端移动和缩放的功能，并提供了具体的代码示例。此外，作者还分享了前端开发的知识，并邀请读者关注其公众号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp手机端可移动悬浮球组件实现

1.相关知识点

movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域
即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围
movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动
movable-view 必须设置width和height属性，不设置默认为10px
movable-view 默认为绝对定位，top和left属性为0px
当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

2.具体代码实现

<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all" @click="Click">
                <image src="../.