微信小程序点击图片，可全屏预览图片，长按可保存可转发朋友

舒阳

已于 2022-04-09 13:17:04 修改

阅读量2.7k

点赞数 1

分类专栏：图片预览图片保存图片分享文章标签：微信小程序小程序

于 2022-04-09 11:26:01 首次发布

本文链接：https://blog.csdn.net/weixin_46396863/article/details/124057603

版权

图片预览同时被 3 个专栏收录

1 篇文章

订阅专栏

图片保存

1 篇文章

订阅专栏

图片分享

1 篇文章

订阅专栏

本文介绍了如何使用微信小程序的官方方法`previewImage`来实现在轮播图中点击图片预览大图的功能。通过绑定事件及构造预览图片数组，可以实现图片预览时的左右翻页效果。示例代码展示了如何从数据中获取图片URL并进行预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序官方
方法：官方提供的 previewImage 方法，可点击顶部的官方链接查看
直接上代码

页面是一个轮播图(根据自己情况即可)
数据是服务端返的，存放在data中
注意：构造要预览的图片数组时，官方要的是 Array<string> 格式的( [ ‘1.png’, ‘2.png’] )

<swiper>
        <swiper-item 
            wx:for="{{goodsObj.picUrl}}"
            wx:key="id"
            data-url="{{item}}"
            bindtap="handlePrevewImage"
        >
            <image src="{{item}}"></image>
        </swiper-item>
</swiper>

 // 点击轮播图 预览大图
    // (1) 给轮播图绑定事件
    // (2) 调用 previewviewImage
    handlePrevewImage(event) {
        const current = event.currentTarget.dataset.url; // urls 第一张图
        // 1. 先构造要预览的图片数组
        const urls = this.data.goodsObj.picUrl.map(v => v); // 是一个数组，预览时可左右翻页
        wx.previewImage({
            current,
            urls,
        })
    },