微信小程序 movable-view

最新推荐文章于 2025-06-11 17:33:01 发布

UFO00001

最新推荐文章于 2025-06-11 17:33:01 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/UFO00001/article/details/72637500

微信小程序专栏收录该内容

39 篇文章

订阅专栏

本文介绍了微信小程序中的movable-view组件，它是一个可移动的视图容器，支持拖拽滑动。文章通过属性介绍和简单示例，展示了如何使用movable-view，包括不同direction属性设置对拖动方向的影响，以及注意事项，如需设置width和height属性，以及移动范围的限制。文章旨在帮助开发者在实际项目中优化页面效果。

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

movable-view 是一个可移动的视图容器，在页面中可以拖拽滑动。

1.属性：

属性名	类型	默认值	说明
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动
x	Number		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值

2.用法：

简单示例1：

<movable-area style="height: 300rpx;width: 300rpx;background: blue;">
    <movable-view direction="all" style="height: 100rpx; width: 100rpx; background: yellow;">
     </movable-view>
</movable-area>

我们用movable-area设定了一个300x300大小的一个可拖动区域(蓝色)，然后在这个区域内放置了一个大小为100x100的可以拖动内容movable-view（黄色），可拖动内容的direction设置为all，即可以在任意方向上进行拖动。

效果如图：

简单示例2：

<movable-area style="height: 600rpx;width: 600rpx;background: blue;">
      <!--黄色可以任意二维方向拖动内容-->
      <movable-view direction="all" style="height: 100rpx; width: 100rpx; background: yellow;border-radius:30px">
      </movable-view>
      <!--红色只能横向拖动内容-->
      <movable-view direction="horizontal" x="100" y="0" style="height: 100rpx; width: 100rpx; background: red;">
      </movable-view>
       <!--绿色只能竖向拖动内容-->
      <movable-view direction="vertical"  x="0" y="100"  style="height: 100rpx; width: 100rpx; background: #0f0;">
      </movable-view>
       <!--白色不能拖动内容-->
      <movable-view direction="none"  x="100" y="100"  style="height: 100rpx; width: 100rpx; background: #fff;border-radius:30px">
      </movable-view>
</movable-area>

我们沿用movable-area设定了一个300x300大小的一个可拖动区域(蓝色)，然后在这个区域内分别放置了4个一个大小为100x100的可以拖动内容movable-view，

其中黄色可拖动内容的direction设置为all，即可以在任意方向上进行拖动；

红色可拖动内容的direction设置为horizontal，即只能横向进行拖动；

绿色可拖动内容的direction设置为vertical，即只能竖向进行拖动；

白色可拖动的direction设置为none，即不能拖动。

效果如图：

注意：

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轴方向分开考虑）

参考链接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html

在具体项目中，可以优化页面效果。欢迎留言交流指正！