movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整动画效果。
先从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小的,但是子容器的移动范围必须包括父容器.
先看官方实例代码:
<view> <view>movable-view区域小于movable-area</view> <movable-area> <movable-view x="{{x}}" y="{{y}}" direction="all"> </movable-view> </movable-area> <view> <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button> </view> <view>movable-view区域大于movable-area</view> <movable-area direction="all"> <movable-view> </movable-view> </movable-area> </view>
这里面有个错误,应该是编写人的一点小失误吧. 第二个movable-area的属性direction应该写在movable-view上.
<movable-area > <movable-view direction="all"> </movable-view> </movable-area>
看下效果:
1) 当movable-view区域小于movable-area时,子容器movable-view只能在父容器内移动. 下图的效果是设置了属性 out-of-bounds="true"的效果. out-of-bounds可以染子容器到达父容器边界时有个超出边界然后回弹的动画. 并不是真正能让子容器移动到父容器以外.
2) 当movable-view区域大于movable-area时,子容器移动的范围必须包括父容器.
第二种情况中,把父容器看做手机屏幕可视区域,子容器看做要查看的长图,大图. 就可以实现拖动查看图片的效果. 如果图片时动态加载的,不是固定的图片,就要兼容图片宽高小于屏幕可视宽高和图片宽高大于可视屏幕宽高的可能性,也就是要考虑到以上两种情况.
我们要在movable组件加载的同时设置好movable-view的宽高,因为movable组件加载成功后再去改变movable-view的大小,可移动区域是不会变的. 我们可以通过页面中要查看的图片的onload事件中获取图片宽高(目前我只发现bindload事件能获取到图片宽高),然后存储起来imgWidth和imgHeight. 当用户点击图片时,在bindtap事件中设置好movable-view的宽高,同时将movable-area的弹窗wx;if设置为true.
<!-- 要查看的图片列表 --> <view> <view> <image wx:for="{{item.imglist}}" wx:for-item="itemImg" wx:key="*this" bindload="imageOnload" src="{{ itemImg}}" bindtap="showResizeModal" data-src="{{itemImg}}"></image> </view> </view>
因为要查看的是一个图片列表, 我用了一个数组去存储每个图片的宽高,然后通过图片id来关联
/** * 加载图片 */ imageOnload:function(e){ var id = e.currentTarget.id this.data.imgIdList[id] = { width:e.detail.width, height:e.detail.height } }, 模板页面 <!--components/resizePicModal/resizePicModal.wxml--> <template> <scroll-view> <view bindtap="closeResizeModal"> 取消预览 </view> <movable-area > <movable-view direction="all" out-of-bounds="true" x="{{img.x}}" y="{{img.y}}" > <image mode="widthFix" src="https://www.jb51.net/{{img.currentSrc}}"></image> </movable-view> </movable-area> </scroll-view> </template> /** * 打开弹窗 */ showResizeModal: function (e) { var src = e.currentTarget.dataset.src; var x = 0 var y =0 try { var width = this.imgIdList[e.currentTarget.id].width; //图片原宽 var height = this.imgIdList[e.currentTarget.id].height; //图片原高 //小程序默认固定宽320px,获取top和left值,使图片居中显示 height = height * (320 / width); width = 320; x = (app.windowWidth - width) / 2 y = (app.windowHeight - height) / 2 } catch (e) { } var img = { x: x, y: y,26 currentSrc: src, }; this.setData({ img: img, isCheckDtl: true }); },
部分CSS代码
.backdrop{ background: rgba(0, 0, 0, 1); width:100%; height: 100%; position: fixed; top:0; left:0; }
以上基本上可以完成一个点击查看图片的需求.