微信小程序 之wx.previewImage图片预览(单张图片预览)

wxml部分代码如下:

<view class="wehx-card_goods" wx:for="{{list}}" wx:key="*this">
	<image class="goods_img" src="{{item.url}}" data-src="{{item.url}}" bindtap="previewImage"></image>
</view>

js部分代码如下:

 data: {
    list: [{
      name: '商品0',
      url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"
    }, {
      name: '商品1',
      url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"
    }, {
      name: '商品2',
      url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"
    }, {
      name: '商品3',
      url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"
    }, {
      name: '商品4',
      url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"
    }, {
      name: '商品5',
      url: "https://img1.baidu.com/it/u=3133854523,1234758778&fm=224&fmt=auto&gp=0.jpg"
    }],
  },
    // 单张图片预览
  previewImage:function(e){
    let picture = e.currentTarget.dataset.src;
    wx.previewImage({
      current: picture, // 当前显示图片的http链接
      urls: [picture], // 需要预览的图片http链接列表  ===重中之重===
    })
  }

注意：
1.在此实例中，每个item对象中只有一个图片
2.urls的参数是Array
3. urls: [图片链接]可以将字符串类型的地址转化成符合要求的数组类型