微信小程序：常用功能5——点击图片，实现图片的预览功能wx.previewImage(Object object, boolean showmenu)

向用户展示图片时，为了展现布局的美观性，往往不同尺寸的图片要放在相同大小的容器中。
但是图片想让用户看清、或者保存时，我们就要进行图片的预览，像用户展示原图。
图片预览接口：wx.previewImage(Object object, boolean showmenu)。在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

首先，我再百度找几张图片放在data里边待用

这里要用数组，因为这个接口的运行方式是在图片列表中显示其中的某一个图片，列表是数组格式。

然后，在wxml里边把图片数组遍历显示出来：

<view wx:for="{{pic}}" wx:key="key">
  <image src="{{item}}" style="width:100%;" mode='aspectFill'></image>
</view>

其中，mode="aspectFill"作用是设置三张图片的缩放模式：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

现在我们做点击图片，进行图片预览。

给图片加一个bindtap="see"点击指令。

<view wx:for="{{pic}}" wx:key="key">
  <image src="{{item}}" style="width:100%;" mode='aspectFill' bindtap="see"></image>
</view>

js使用预览图片的接口wx.previewImage(Object object, boolean showmenu):

  see(e){
    console.log(e)
    let indx = e.currentTarget.dataset.index // 找到点击图片的索引位置
    wx.previewImage({
      current: this.data.pic[indx], // 当前显示图片的http链接，将点击图片的索引数指定好
      urls: this.data.pic // 需要预览的图片http链接列表
    })
  },

此时就可以进行图片预览了，同时开可以左右滑动切换。有意思：）

我不是专业程序工作者，在这里是把我的小程序设计经验分享给大家。
如果其中有用词不当的地方，请大家留言指正，我们共同学习。
更多设计、功能的学习经验，大家也可以去我的公众号查看！
————

标签：pic,预览,微信,object,key,previewImage,图片,wx
来源： https://blog.csdn.net/m0_51592186/article/details/111163501