微信小程序轮播图预览图片

Posted by Reed on June 13, 2019

需要预览图片

在小程序里需要显示多张图片,这个时候用轮播图是一个比较不错的方案,如下图。 能浏览查看了,这时有的用户可能需要全屏(放大)查看图片、或者是保存这张图片,我们就需要对程序进行一些修改了。

使用官方接口

经过一番查找,发现小程序其实提供了wx.previewImage这样的一个接口,并且体验也很不错。 为轮播图绑定一个点击事件,并获得当前点击图片的序号,即可预览图片,并且还可以在全屏预览状态左右滑动切换图片。

wx.previewImage({
    current: e.currentTarget.dataset.current, // 当前显示图片的http链接
    urls: this.data.pictures // 需要预览的图片http链接列表
})

长按图片也可以进行一些常见的操作,如分享、保存等。