如果做HTML前端开发的，实现点击图片放大的功能，这个可以使用弹出层即可实现，这样是比较简单，但是如果要加上切换上一张或下一张，就得写JS代码实现，当然也有很多插件会实现这种功能。

写微信小程序开发时就比较简单了，因为微信小程序有直接提供API功能实现，是使用wx.previewImage API功能，参数及使用方法，这里就不列出了，大家可以参考微信的开发文档，但用在实际场景中还是可以列出的，因为微信并没有写出实例，所以有时候不在好消化吸收。

首先我们图片列表需在当前JS页定义图片数组列表，代码如下：

data: {

com_img_list:['https://yii.wztm.net/wx/images/tg.png','https://yii.wztm.net/wx/images/logobanner.png'],

  },

然后写绑定函数功能showimg,代码如下：

showimg:function(e){

    var that=this;

    var imglist=that.data.com_img_list;

    var index=e.currentTarget.dataset.index;

    wx.previewImage({

      current: imglist[index], // 当前显示图片的http链接

      urls: imglist // 需要预览的图片http链接列表

    })

  }

再在wxml文件中展示出来，并绑定点击事件，代码如下：

样式wxss只需要对显示部分定义就好，弹出部分不需要写样式文件。

最后效果图展示：

点击后弹出效果图：

可以通过左右滑动进行图片切换，这个是真的非常方便呢。