小程序預覽圖片wx.previewImage

效果圖:

====>>>>

 

代碼:

<swiper style="width:100%;height:375rpx" indicator-dots="true"
      autoplay="true" interval="5000" duration="500">
        <swiper-item wx:for="{{imgUrls}}" wx:key>
          <image data-src="{{item}}" bindtap='previewImage' style='width:100%;height:100%' mode='aspectFill' src="{{item}}" class="slide-image"/>
        </swiper-item>
    </swiper>

//注釋: data-src="{{item}}" 別忘了

 data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://www.cnblogs.com/images/cnblogs_com/520BigBear/1196074/t_dog.jpg'
    ]
  },

/**
   * 預覽圖片
   */
  previewImage(e) {
    const current = e.target.dataset.src  //獲取當前點擊的 圖片 url
    console.log(current)
    wx.previewImage({
      current,
      urls: this.data.imgUrls
    })
  }

 

官方參考文檔:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

 

peace & love -------大熊