小程序实现图片预览

wxml代码.

// mode='aspectFill'为图片显示的具体尺寸，避免图片失真
<view class="pic">
	<image wx:for='{{imageList}}' wx:key='item' src="{{item}}" mode='aspectFill' bindtap="preview" data-url='{{item}}'></image>
</view>

js代码.

// 点击图片放大预览
  preview: function (e) {
    // e.currentTarget.dataset.url能拿到当前点击的图片的url，前提是在wxml里配合使用data-url
    // urls(this.data.imageList)是从后台拿到图片的合集
    wx.previewImage({
      current: e.currentTarget.dataset.url, // 当前显示图片的http链接
      urls: this.data.imageList // 需要预览的图片http链接列表
    })
  }

微信的预览方法在一下位置，大家可以自行去微信官方文档查看