小程序预览轮播图 大图

在很多的地方需要这一功能，比如淘宝点击商品的轮播图或会放大这一张图片到全屏。
这具体怎么实现呢？
首先对轮播图绑定一个单击事件，并且给其一个参数，也就是当前图片的url值

代码如下：

<view class="detail_swiper">
    <swiper autoplay circular indicator-dots interval="2000">
        <!--给轮播图的子选项绑定事件。-->
        <swiper-item wx:for="{{goodsObj.pics}}" wx:key="pics_id" 
        	data-url="{{item.pics_mid}}" bindtap="handlePrevewImage">
            <image src="{{item.pics_mid}}" mode="widthFix" />
        </swiper-item>
    </swiper>
</view>

随后在对应的js文件当中对参数及事件进行接收：
先对这个appdata当中的全局变量进行map构造，随后接收从wxml当中传回来的url这个参数，最后使用wx.previewImage进行赋值。这里的urls进行map后就是对所有轮播图的图片的url进行构造成一个数组。

handlePrevewImage(e) {
    console.log(e)
    const urls = this.GoodsInfo.pics.map(v => v.pics_mid);
    //接收传参的urls中的值index
    const current = e.currentTarget.dataset.url;
    console.log(current)
    wx.previewImage({
      current,
      urls
    });
  },

最后看一下效果图：先将图片移动到最后一张，单击图片预览。