nuiapp movable-view

NuiApp 是 CSDN 开发的一款小程序开发框架，而 Movable-view 是 NuiApp 提供的一个组件，用于实现可移动的视图。它可以让视图在页面中自由拖动，并具有一些常用的手势操作，例如缩放和旋转等。你可以在 NuiApp 的文档中找到关于 Movable-view 的详细使用说明和示例代码。

相关问题

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 ]

movable-view 缩放 如何实现

要在 `movable-view` 组件中实现缩放功能，可以通过以下步骤实现：

1. 在 `movable-view` 中嵌套一个 `view` 组件，并设置 `view` 的初始样式和缩放比例。
2. 在 `movable-view` 的 `touchstart` 事件中记录当前手指的位置和 `view` 的初始尺寸和位置。
3. 在 `movable-view` 的 `touchmove` 事件中计算手指移动的距离和缩放比例，根据移动距离和缩放比例计算 `view` 的样式，并设置 `view` 的样式。
4. 在 `movable-view` 的 `touchend` 事件中重置 `view` 的尺寸和位置。

下面是一个实现 `movable-view` 缩放功能的示例代码：

<!-- wxml -->
<view class="container">
  <movable-view class="movable-view" direction="all" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd">
    <view class="content" style="{{viewStyle}}"></view>
  </movable-view>
</view>

// js
Page({
  data: {
    startTouches: [],
    viewStyle: 'width: 200px; height: 200px; transform: scale(1);',
    viewWidth: 200,
    viewHeight: 200,
    viewLeft: 0,
    viewTop: 0,
  },

  onTouchStart(e) {
    const { pageX, pageY } = e.touches[0]
    const { viewWidth, viewHeight } = this.data
    this.setData({
      startTouches: [{ x: pageX, y: pageY }],
      viewStyle: `width: ${viewWidth}px; height: ${viewHeight}px; transform: scale(1);`,
    })
  },

  onTouchMove(e) {
    const { pageX, pageY } = e.touches[0]
    const { startTouches, viewWidth, viewHeight, viewLeft, viewTop } = this.data
    if (e.touches.length === 2) {
      const startDistance = Math.sqrt(Math.pow(startTouches[1].x - startTouches[0].x, 2) + Math.pow(startTouches[1].y - startTouches[0].y, 2))
      const endDistance = Math.sqrt(Math.pow(e.touches[1].pageX - e.touches[0].pageX, 2) + Math.pow(e.touches[1].pageY - e.touches[0].pageY, 2))
      const scale = endDistance / startDistance
      const width = viewWidth * scale
      const height = viewHeight * scale
      const left = viewLeft - (width - viewWidth) / 2
      const top = viewTop - (height - viewHeight) / 2
      this.setData({
        viewStyle: `width: ${width}px; height: ${height}px; transform: scale(${scale}); left: ${left}px; top: ${top}px;`,
      })
    } else {
      const deltaX = pageX - startTouches[0].x
      const deltaY = pageY - startTouches[0].y
      const left = viewLeft + deltaX
      const top = viewTop + deltaY
      this.setData({
        viewStyle: `width: ${viewWidth}px; height: ${viewHeight}px; transform: scale(1); left: ${left}px; top: ${top}px;`,
      })
    }
  },

  onTouchEnd(e) {
    const { viewWidth, viewHeight, viewLeft, viewTop } = this.data
    this.setData({
      startTouches: [],
      viewStyle: `width: ${viewWidth}px; height: ${viewHeight}px; transform: scale(1); left: ${viewLeft}px; top: ${viewTop}px;`,
    })
  },
})

在上面的代码中，我们在 `movable-view` 中嵌套了一个 `view` 组件，并将其样式设置为可缩放的。在 `touchstart` 事件中记录了当前手指的位置和 `view` 的初始尺寸和位置。在 `touchmove` 事件中，如果手指数量为 2，就计算出手指之间的距离和缩放比例，并根据缩放比例计算出 `view` 的样式。如果手指数量为 1，就计算出手指移动的距离，并根据移动距离计算出 `view` 的样式。在 `touchend` 事件中，重置 `view` 的尺寸和位置。