小程序图片点击放大右滑

需求 :

点击图片放大,并且多张的话可以右滑

效果:

1.没有滑动时

2.滑动了之后

代码:

    <view>
         <view class="fishqc-reportImg"  style="background-image:url({{eachImg}});" wx:for="{{item.img}}" bindtap="clickToExpand" wx:for-index="idx"
          wx:for-item="eachImg" data-url="{{item.img}}" >
         </view>
   </view>

 clickToExpand: function (event) {
        var index = event.currentTarget.dataset.idx;
        wx.previewImage({
            current: '',
            urls: event.currentTarget.dataset.url
        })
    }

　　

这里要注意的是

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

1.   

data-url="{{item.img}}"传过来的是一个数组

2.但是这个

   <view>
         <view class="fishqc-reportImg"  style="background-image:url({{eachImg}});" wx:for="{{item.img}}" bindtap="clickToExpand" wx:for-index="idx" wx:for-item="eachImg" data-url="{{item.img}}" >
         </view>
   </view>

是作为单个放大图片的循环
所以在这里循环数组的时候wx:for="{{item.img}}",一定要去修改wx:for-index="idx" wx:for-item="eachImg"的名称