用uniapp语言使用movable-view组件对view进行缩放

在页面中添加movable-view组件，并设置其宽高和位置。

<movable-view class="scale-view" direction="all" scale="1" damping="10" friction="100" x="0" y="0" style="width: 200rpx; height: 200rpx; left: 100rpx; top: 100rpx;">
  <view class="inner-view"></view>
</movable-view>

在样式中设置可缩放的view的样式，并设置初始缩放比例为1。

.scale-view {
  position: absolute;
  overflow: hidden;
}

.inner-view {
  width: 100%;
  height: 100%;
  background-color: #f00;
}

/* 初始缩放比例为1 */
.scale-view[animation-scale="1"] {
  transform: scale(1);
}

在js中添加事件监听，根据手势变化来动态改变缩放比例。

onScale(e) {
  // 获取当前缩放比例
  const scale = e.detail.scale;
  // 更新缩放比例
  this.setData({
    scale: scale
  });
}

在wxml中使用插值表达式动态设置缩放比例。

<movable-view class="scale-view" direction="all" scale="{{ scale }}" damping="10" friction="100" x="0" y="0" style="width: 200rpx; height: 200rpx; left: 100rpx; top: 100rpx;" bindscale="onScale">
  <view class="inner-view"></view>
</movable-view>

完整代码如下：

<template>
  <view class="container">
    <movable-view class="scale-view" direction="all" scale="{{ scale }}" damping="10" friction="100" x="0" y="0" style="width: 200rpx; height: 200rpx; left: 100rpx; top: 100rpx;" bindscale="onScale">
      <view class="inner-view"></view>
    </movable-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scale: 1
    };
  },
  methods: {
    onScale(e) {
      // 获取当前缩放比例
      const scale = e.detail.scale;
      // 更新缩放比例
      this.setData({
        scale: scale
      });
    }
  }
};
</script>

<style>
.scale-view {
  position: absolute;
  overflow: hidden;
}

.inner-view {
  width: 100%;
  height: 100%;
  background-color: #f00;
}

/* 初始缩放比例为1 */
.scale-view[animation-scale="1"] {
  transform: scale(1);
}
</style>