uniapp项目预览图片

1. 在轮播图上绑定 点击事件将 索引传过去

    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item  v-for="(item, i) in goods_info.pics" :key="i">
        <!-- 绑定点击事件并传入 索引 -->
        <image @click="preview(i)" :src="item.pics_big" ></image>
      </swiper-item>
    </swiper>

2. 调用 uni.previewImage api进行预览图片的效果

methods: {
    // 实现轮播图的预览效果
    preview(i) {
    // 调用 uni.previewImage() 方法预览图片
      uni.previewImage({

    // 预览时，默认显示图片的索引
      current: i,

    // 所有图片 url 地址的数组
      urls: this.goods_info.pics.map(x => x.pics_big)
  })
}
}