微信小程序实现点击图片放大预览_小程序点击图片查看大图代码

1.点击事件

2.放大

3.左右滑动查看上、下一张

在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了) 

wxml ：

<view class="weui-cells jindu_xinxi">
    <view class="kh_title">留言时间轴</view>
    <view class="weui-cell">
      <view class="weui-cell-third">
        <block wx:for="{{liuyan}}">
         <view class=".weui-cell-list">
          <view class='weui-cell-circle' style="padding-bottom:5px;">
            <image src="../../images/tubiao.png" style="width:30px;height:30px;vertical-align: middle"></image>
            <view style="display:inline-block;margin-left:15px;font-size:14px;">{{item.CreatedOn}}</view>
          </view>
          <view class='weui-cell-line'>
            <view class="line_content">
              <view class="weui-form-preview__bd">
                  <view class="weui-form-preview__item">
                    <view class="weui-form-preview__label">留言人:</view>
                    <view class="weui-form-preview__value">{{item.CreatedBy}}</view>
                  </view>
                  <view class="weui-form-preview__item">
                    <view class="weui-form-preview__label">图片:</view>
                    <view class="weui-form-preview__value"> 
                    <block  wx:for="{{item.files}}" wx:if ="{{item.files.length!= 0}}" wx:for-item="files">
                    <image src='{{files}}' bindtap='previewImg' data-id='{{item.ID}}' data-url='{{files}}' class='img'  ></image>
                    </block>
                    </view>
                  </view>
                  <view class="weui-form-preview__item">
                    <view class="weui-form-preview__label">留言内容:</view>
                    <view class="weui-form-preview__value">{{item.Content}}</view>
                  </view> 
                </view>
            </view>
          </view>    
        </view>
        </block>
      </view>
    </view>
  </view>

上面获取的ID是这一组数据的id不是这个图片的id

js:

 previewImg: function (e) {
    var that = this;
    var id = e.currentTarget.dataset.id;
    var imgUrl = e.currentTarget.dataset.url; //获取当前点击的图片
    var previewImgArr = [];//定义当前预览的数组
   // var imgArr = this.data.imgArr;
   var data = that.data.liuyan;//获取到的数据
    for (var i in data){
      if (id == data[i].ID) {
        previewImgArr = data[i].files;
      }
   }
    console.log(imgUrl);
    console.log(id);
    console.log(previewImgArr);
    wx.previewImage({
      current: imgUrl, //当前图片地址
      urls: previewImgArr,  //所有要预览的图片的地址集合数组形式
      success: function (res) { 
 
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },