微信小程序中关于movable-view移动图片与双指缩放的实例详解

发布日期： 2017-09-12 阅读量： 作者： 网络

movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。这篇文章主要介绍了微信小程序movable view移动图片和双指缩放实例代码,需要的朋友可以参考下

movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整动画效果。

先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器，在页面中可以拖拽滑动".

值得注意的是文档中有一段备注: "当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）". 也就是说父容器movable-area是可以比子容器movable-view小的,但是子容器的移动范围必须包括父容器.

先看官方实例代码:

<view>
 <view>movable-view区域小于movable-area</view>
 <movable-area>
 <movable-view>
 </movable-view>
 </movable-area>
 <view>
 <button>click me to move to (30px, 30px)</button>
 </view>
 <view>movable-view区域大于movable-area</view>
 <movable-area>
 <movable-view>
 </movable-view>
 </movable-area></view>

# movable-view # 小程序 # ie

上一篇: PHPCMS站群是什么？

下一篇: 如何通过 C++ 函数命名反映函数的目的？

微信小程序中关于movable-view移动图片与双指缩放的实例详解

随便看看