手把手带你学习微信小程序 —— 十一 （button 按钮条组件微介绍）

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来创建一个可移动的红色视图： ```html <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 ]