推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序movable-view移动图片和双指缩放
发布时间:2020-11-13
先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:”可移动的视图容器，在页面中可以拖拽滑动”. 官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html.
值得注意的是文档中有一段备注: “当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）”. 也就是说父容器movable-area是可以比子容器movable-view小的,但是子容器的移动范围必须包括父容器.
先看官方实例代码:
1 <view class="section"> 2 <view class="section__title">movable-view区域小于movable-areaview> 3 <movable-area style="height: 200px;width: 200px;background: red;"> 4 <movable-view style="height: 50px; width: 50px; background: blue;" x=http://www.yiyongtong.com/archives/"{{x}}" y=http://www.yiyongtong.com/archives/"{{y}}" direction="all"> 5 movable-view> 6 movable-area> 7 <view class="btn-area"> 8 <button size="mini" bindtap="tap">click me to move to (30px, 30px)button> 9 view> 10 <view class="section__title">movable-view区域大于movable-areaview> 11 <movable-area style="height: 100px;width: 100px;background: red;" direction="all"> 12 <movable-view style="height: 200px; width: 200px; background: blue;"> 13 movable-view> 14 movable-area> 15 view>
这里面有个错误,应该是编写人的一点小失误吧. 第二个movable-area的属性direction应该写在movable-view上.
1 "height: 100px;width: 100px;background: red;" > 2
