movable-view 可移动的视图容器,在页面中可以拖拽滑动。

movable-view必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动。

如果想让图片实现缩放,拖拽效果。则可以把图片放到movable-view容器里面movable-view 可移动的视图容器,在页面中可以拖拽滑动。

效果如下:

movable-view可移动的视图容器

代码如下,布局文件代码: sacle-value 定义缩放倍数

<view style="display: flex;margin-top: 10rpx;">
  <movable-area scale-area>
    <movable-view direction="all"  scale scale-min="0.5" scale-max="4" scale-value="1">
      <image src="/images/test.jpg" mode='widthFix' style="width:750rpx;height: 500rpx"></image>
    </movable-view>
  </movable-area>
</view>

ps:图片从网上下载。如有侵权,请联系删除!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐