2023年微信小程序视图容器 movable-area-加速度jsudo

2023年微信小程序视图容器 movable-area

来源：加速度jsudo

作者

访问量 7498

本文摘要

微信小程序视图容器movable-area是一个可移动的区域，在页面中可以拖拽滑动。对于那些需要在小程序中加入拖拽和滑动操作的企业来说，movable-area与movable-view组合的使用，提供了非常好用的解决方案。 1. movableView的特点 movableView具体有哪些特点呢？除了上述介绍的可移动、拖拽和滑动以外，它还具有以下几个属性：

微信小程序视图容器movable-area是一个可移动的区域，在页面中可以拖拽滑动。对于那些需要在小程序中加入拖拽和滑动操作的企业来说，movable-area与movable-view组合的使用，提供了非常好用的解决方案。

1. movableView的特点

movableView具体有哪些特点呢？除了上述介绍的可移动、拖拽和滑动以外，它还具有以下几个属性：

direction：移动方向，有all、vertical、horizontal、none四种选择；
inertia ：是否带有惯性；
out-of-bounds ：超过可移动区域后是否还可以移动；
x 和 y ：分别代表x轴和y轴方向的偏移；
damping ：控制x或y改变时的动画和过界回弹的动画，值越大移动越快；
friction ：控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置为默认值。

2. movableArea与movableView的使用

同时，我们需要注意以下几点：

movable-view必须在组件中，并且必须是直接子节点，否则不能移动。

并且，在使用时，我们需要给movable-area设置height和width属性，默认情况下为10px。如果movable-view小于movable-area，则移动范围是在movable-area内；反之，范围必须包含movable-area（沿x轴和y轴分别考虑）。

3.示例代码



Page({
  data: {
    x: 0,
    y: 0
  }
})

通过上述示例代码，可以看到movable-view就像一个单独的视图组件一样被嵌入到了movable-area中，可以随意拖拽和滑动进行移动操作。如此方便实用的movable-area该得到大家的青睐。如果贵企业在小程序中需要加入拖拽、滑动操作，那么不妨考虑采用movable-area与movable-view组合的方式。