微信小程序movable-view缩放时抖动问题解决

前几天开发一个小程序选座的需求，要求座位区域支持上下左右拖动，支持放大和缩小，于是我就用movable-area和movable-view来实现了，但是有一个问题就是，放大和缩小的时候，会出现抖动，这里和大家分享一下解决方案。

一起来看部分核心代码：

<movable-area>
  <movable-view
    scale="{{true}}"
    scale-value="1"
    scale-min="0.625"
    scale-max="2"
    x="{{x}}"
    y="{{y}}"
    direction="all"
    out-of-bounds="{{true}}"
  >
    <!-- 这里省略座位相关的代码 -->
  </movable-view>
</movable-area>

在测试时，我们发现，缩放到某些特定比例时，点击座位，会抖动，导致用户体验直线下降。

话不多说，上解决方案：

给 movable-view 添加属性 animation="{{false}}"

就像下面这样：

<movable-area>
  <movable-view
    scale="{{true}}"
    scale-value="1"
    scale-min="0.625"
    scale-max="2"
    x="{{x}}"
    y="{{y}}"
    direction="all"
    out-of-bounds="{{true}}"
  >
    <!-- 这里省略座位相关的代码 -->
  </movable-view>
</movable-area>

以上就是微信小程序movable-view缩放时抖动问题解决方案。

本文地址：https://www.tides.cn/p_mina-movable-view-and-movable-area-dithering-fix