图片放大预览效果实现

Posted 2021-12-03 温文艾尔

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言

---

前言

记录一下做项目的过程中遇到的图片放大预览效果的实现

实现的是点击图片可以放大预览，这个效果在京东淘宝都可以看到
首先为轮播图添加点击事件，以及得到每个图片对应的url数据

<!-- 轮播图 -->
<view class="detail_swiper">
  <swiper
  indicator-dots
  duration="3000"
  autoplay
  circalar
  >
    <swiper-item
    wx:for="{{goodsObj.pics}}"
    wx:key="pics_id"
    bindtap="handlePreviewImage"
    data-url="{{item.pics_mid}}">
    <image mode="widthFix" src="{{item.pics_mid}}"></image>
    </swiper-item>
  </swiper>

利用微信小程序自带的API, wx.previewImag可以进行实现，其中GoodsInfo.pics获取的是所有图片的url

  //点击轮播图放大预览
  handlePreviewImage(e){
    //先构造要预览的图片数组
    const urls = this.GoodsInfo.pics.map(v=>v.pics_mid);
    //接收传递过来的当前图片url
    const current = e.currentTarget.dataset.url;
    wx.previewImage({
      current,
      urls
    })
  }

效果