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="{{x}}" y="{{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   
2           <view class="flex-wrap flex-pic">
3               <view class="picList">            
4                   

for="{{item.imglist}}" wx:for-item="itemImg" wx:key="*this" id="{{'rfnd_'+index}}" bindload="imageOnload" src="{{ itemImg}}" bindtap="showResizeModal" data-src="{{itemImg}}"> 5 view> 6 view>

因为要查看的是一个图片列表, 我用了一个数组去存储每个图片的宽高,然后通过图片id来关联

 1   /**
 2    * 加载图片
 3    */
 4   imageOnload:function(e){
 5     var id = e.currentTarget.id
 6     this.data.imgIdList[id] = {
 7       width:e.detail.width,
 8       height:e.detail.height
 9     }
10     
11   },

模板页面

 1 
 3 <template name="resizePic">
 4 
 5   <scroll-view class="backdrop"> 
 6     <view class="close-icon" bindtap="closeResizeModal"> 
 7       取消预览
 8     view>
 9     <movable-area style="width:100%;height:100%;"  >
10         <movable-view direction="all" 
11         out-of-bounds="true"  x="{{img.x}}" y="{{img.y}}" >
12         <image  mode="widthFix" class="dtl-img" src="{{img.currentSrc}}">image>
13         movable-view>
14         
15     movable-area> 
16   scroll-view> 
17  template>

 1   /**
 2    * 打开弹窗
 3    */
 4   showResizeModal: function (e) {
 5     var src = e.currentTarget.dataset.src;
 6     var x = 0
 7     var y =0
 8     try {
 9       var width = this.imgIdList[e.currentTarget.id].width; //图片原宽
10       var height = this.imgIdList[e.currentTarget.id].height; //图片原高
11      
12       //小程序默认固定宽320px,获取top和left值,使图片居中显示
13       height = height * (320 / width);
14       width = 320;
15 　　　　
16       x = (app.windowWidth - width) / 2 
17       y = (app.windowHeight - height) / 2
18 
19     } catch (e) { }
20     var img = {
21       x: x,
22       y: y,
26      currentSrc: src,
27     };
28     this.setData({ img: img, isCheckDtl: true });
29     
30   },

部分CSS代码

.backdrop{
  background: rgba(0, 0, 0, 1);
  width:100%;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
}

以上基本上可以完成一个点击查看图片的需求.

然而如果再支持双指缩放的话,movable-view实现不了.我暂没想出来怎么实现,如果有人知道,希望能够指点迷津. 主要原因是因为还是我上文提到的那句话:”movable组件加载成功后再去改变movable-view的大小,可移动区域是不会变的”.缩放后图片大小肯定会改变的. 缩小还好,一旦放大,可移动区域还是原来的不会改变.想象一下,如果一张宽度刚刚好时屏幕可视宽度的图片,放大后,这张图片就只能在屏幕可视宽度windowWidth的范围中移动,看不到左也看不到右边超出的部分.

所以如果既要可移动图片又要可缩放,就不能用movable-view组件了,自己写个吧. 原来bindtouchmove会触发页面的滚动条,但是现在微信好像已经修复了这个BUG,我今天在真机上测试没有出现这个问题.

自定义控件resizePicModal.wxml:

 1 
 2 <template name="resizePic">
 3   <scroll-view class="backdrop"  catchtouchmove="bindTouchMove" catchtouchend="bindTouchEnd" bindtouchstart="bindTouchStart" > 
 4     <view class="close-icon" bindtap="closeResizeModal"> 
 5       取消预览
 6     view>
 7        <image catchtouchmove="bindTouchMove" bindtouchend="bindTouchEnd" bindtouchstart="bindTouchStart"  
 8       style=" transform: scale({{img.baseScale}}); position:absolute; top:{{img.top}}px; left:{{img.left}}px; "
 9       mode="widthFix" class=