小程序-图片大图预览和轮播交互

轮播图变化-更新下标

点击图片-大图预览

<template>
  <!-- 商品主图 -->
  <view class="preview">
    <swiper @change="onChange" circular>
      <swiper-item v-for="item in goods?.mainPictures" :key="item">
        <image @tap="onTapImage(item)" mode="aspectFill" :src="item" />
      </swiper-item>
    </swiper>
    <view class="indicator">
      <text class="current">{{ currentIndex + 1 }}</text>
      <text class="split">/</text>
      <text class="total">{{ goods?.mainPictures.length }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">

// 轮播图变化时

const currentIndex = ref(0)

const onChange: UniHelper.SwiperOnChange = (e) => {

  currentIndex.value = e.detail!.current

}

// 点击图片

const onTapImage = (url: string) => {

  // 大图预览

  uni.previewImage({

    current: url, // 当前显示图片的链接

    urls: goods.value!.mainPictures, // 需要预览的图片链接列表  数组

  })

}

</script>