【干货】微信小程序图片拖动缩放 movable-view-area

最新推荐文章于 2025-07-15 14:18:38 发布

原创

最新推荐文章于 2025-07-15 14:18:38 发布 · 置顶 · 6k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍如何在微信小程序中实现图片的拖动和等比例缩放功能，关键在于正确设置movable-view和movable-area的尺寸，并确保宽度按比例缩放。示例代码包括wxml、js和wxss部分。

最关键的就是movable 两个view和area的大小设置，其次就是设置 width =100% 等比例缩放

下面直接上代码：

wxml：

  <view class="section">
  
  <view class="section__title">可放缩</view>
  <scroll-view scroll-x="true" scroll-y="true" style="height:700px" >
  <movable-area class="img" style="height: 150px; width: 150px; background: red;" scale-area>
    <movable-view  style="height: 200px; width: 200px; background: blue;" direction="all"  bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="10" scale-value="2">
    <image class='img'  src="../image/lushu.jpg"></image> 
    </movable-view>
  </movable-area>
  </scroll-view>
</view>

js：

Page({
  data: {
    x: 0,
    y: 0
  },
  tap: function (e) {
    this.setData({
      x: 30,
      y: 30
    });
  },
  onChange: function (e) {
    console.log(e.detail)
  },
  onScale: functio