微信小程序 点击图片预览

1.单个图片点击预览
      <image src="{{shangchuantp}}" bindtap="handleyltp" data-src="{{shangchuantp}}" ></image>

js中

data{

shangchuantp:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603959336&di=63a207533888f2a2d4c025870311ce40&src=http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg"，

}

放到js中的方法

// 预览图片
handleyltp(e){
  var src = e.currentTarget.dataset.src;
  var imgList =[this.data.shangchuantp];
  //图片预览
  wx.previewImage({
    current: src, // 当前显示图片的http链接
    urls: imgList // 需要预览的图片http链接列表
  })
},

2.多个图片上传

 <block wx:for="{{shangchuantp}}" wx:key="index">
      <image src="{{item}}" bindtap="handleyltp" data-src="{{item}}" data-list="{{shangchuantp}}"></image>
    </block>

js中

data{

shangchuantp:[
      ""https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603959336&di=63a207533888f2a2d4c025870311ce40&src=http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg"，

"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603959336&di=63a207533888f2a2d4c025870311ce40&src=http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg"，

"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603959336&di=63a207533888f2a2d4c025870311ce40&src=http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg"，

"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603959336&di=63a207533888f2a2d4c025870311ce40&src=http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg"，
    ]

}

// 预览图片
handleyltp(e){
  var src = e.currentTarget.dataset.src;
  var imgList =e.currentTarget.dataset.list;
  //图片预览
  wx.previewImage({
    current: src, // 当前显示图片的http链接
    urls: imgList // 需要预览的图片http链接列表
  })
},