微信小程序：点击图片进行预览

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39702981/article/details/84333260

微信小程序：点击图片进行预览

在开发需求中，经常有类似与九宫格的图片展示，当点击图片时进行图片的预览，如果多图的情况还可以左右滑动。

小程序中具体实现效果如下：

WXML
<view class='imgList'>      
  <view class='imgList-li' wx:for='{{imgArr}}'>
    <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image>
  </view>
</view>

随便写了一些样式
WXSS
.imgList{
  width: 100%;
}
.imgList .imgList-li{
  width: 100%;
}
.imgList .imgList-li .img{
  width: 400rpx;
  height: 400rpx;
}

Js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgArr:[
      'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg',
      'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg',
      'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg',
      'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
    ]
  },
  previewImg:function(e){
    console.log(e.currentTarget.dataset.index);
    var index = e.currentTarget.dataset.index;
    var imgArr = this.data.imgArr;
    wx.previewImage({
      current: imgArr[index],     //当前图片地址
      urls: imgArr,               //所有要预览的图片的地址集合 数组形式
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }
})

imgArr是我存放的静态数据，把图片地址存放在一个数组当中； 
当点击某个图片是，根据data-index=”{{index}}”拿到当前图片的索引； 
把当前图片放到current属性中，表示首先预览的图片是点击时的图片；

当然这只是一个demo，具体项目肯定是动态数据进行展示的，所以在项目当中我们可以把要进行预览展示的图片进行数组集合的处理，再根据上面步骤进行展示。
--------------------- 
作者：mcYang0929 
来源：CSDN 
原文：https://blog.csdn.net/mcyang0929/article/details/78880417 
版权声明：本文为博主原创文章，转载请附上博文链接！