movable-view

movable-view是一个可移动的视图容器，在页面中可以通过拖拽滑动来改变其位置。它通常与movable-area一起使用，movable-area是movable-view的父级容器，必须设置width和height属性，否则默认为10px。\[1\]

注意事项包括：
1. movable-view和movable-area都必须设置width和height属性，否则默认为10px。
2. movable-view默认为绝对定位，top和left属性为0px。
3. movable-view的移动范围限制在movable-area内，如果movable-view的宽或高值比movable-area大，则只能在x或y方向移动，若都超过，则无法移动。
4. movable-view必须在组件中，并且必须是直接子节点，否则不能移动。\[2\]

在微信小程序中，movable-view是一个独有的模块，它有两个标签：movable-area作为父容器，movable-view作为子容器。子容器必须在父容器中，否则无法实现移动效果。\[3\]

下面是一个示例代码，展示了如何使用movable-view和movable-area来创建一个可移动的红色视图：

<movable-area class='area'>
  <movable-view class='a' direction='all' inertia out-of-bounds="{{false}}" x="{{x*2}}rpx" y="{{y*2}}rpx" damping='30' friction="30">
    我是红色
  </movable-view>
</movable-area>
<button bind:tap="areaEvent">按钮</button>

在这个示例中，movable-view被设置为红色，并且可以通过拖拽滑动来改变其位置。\[3\]
#### 引用[.reference_title]
- *1* *2* [uni-app视图容器之movable-view](https://blog.csdn.net/qq_27600723/article/details/106452491)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [手把手带你学习微信小程序 —— 九 （movable-view 组件）](https://blog.csdn.net/caidewei121/article/details/96352443)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]