点击轮播图放大显示

微信小程序中已经将此功能封装成为一个函数
**

一、函数

wx.previemImage(Object,Object)

1、参数

Object object

urls: 表示图片的url列表（Array）
current: 表示默认打开的图片url

二、代码示例

1、WXML部分

<view class="swiper_container">
    <swiper autoplay="{{true}}" circular="{{true}}" interval="4000" indicator-dots="{{true}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#000000">
      <!---
                1、bindtap="handlePreviewImage"  =>   给swiper-item 绑定了点击事件
                2、事件的回调函数是handlePreviewImage()
                3、触发点击事件的时候就向回调函数中传入触发点击事件 item 的图片url
            -->
        <swiper-item wx:for="{{goodsObj.pics}}" wx:key="pics_id" bindtap="handlePreviewImage" data-url="{{item.pics_mid}}">
            <image mode="widthFix" src="{{item.pics_mid}}" />
        </swiper-item>
    </swiper>
</view>

2、JavaScript部分

/*构造图片的url数组*/
/*
    1、向接口发送请求，获取到的数据保存在goodsObj中
  2、使用map构造出图片的urls数组
*/
/*回调函数的实现*/
  handlePreviewImage(e){
    /* 
        1、对 this.goodsObj.pics 这个数组使用map  构造出urls函数
      2、将 v.pics_mid 作为数组urls中的元素
      3、urls中存放的就是轮播图中所有图片的url
    */
    const urls = this.goodsObj.pics.map(v => v.pics_mid);  
    // 参数e中包含了传入进来的url参数  可以从中获取到触发点击事件的图片的url  存入 urlNow 中 
    // 否则每次点击图片放大的都是第一张
    const urlNow = e.currentTarget.dataset.url;
    wx.previewImage({
      current: urlNow,
      urls:urls,
    });
  },