shop-uniapp/pages/goods/components/SlideImage.vue

<template>
  <!-- 商品图片 -->
  <view class="images-swiper">
    <swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :indicator-dots="indicatorDots" :interval="interval" :circular="true" @change="setCurrent">
      <swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
        <image class="slide-image" mode="aspectFill" :src="item.preview_url"></image>
      </swiper-item>
    </swiper>
    <view class="swiper-count">
      <text>{{ currentIndex }}</text>
      <text>/</text>
      <text>{{ images.length }}</text>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      images: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        indicatorDots: true, // 是否显示面板指示点
        autoplay: true, // 是否自动切换
        interval: 3000, // 自动切换时间间隔
        duration: 800, // 滑动动画时长
        currentIndex: 1 // 轮播图指针
      }
    },

    methods: {

      // 设置轮播图当前指针 数字
      setCurrent(e) {
        const app = this
        app.currentIndex = e.detail.current + 1
      },

      // 浏览商品图片
      onPreviewImages(index) {
        const app = this
        const imageUrls = []
        app.images.forEach(item => {
          imageUrls.push(item.preview_url);
        });
        uni.previewImage({
          current: imageUrls[index],
          urls: imageUrls
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  // swiper组件
  .images-swiper {
    position: relative;
  }

  .swiper-box {
    width: 750rpx;
    height: 750rpx;

    .slide-image {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: block;
    }
  }

  // swiper计数
  .swiper-count {
    position: absolute;
    right: 30rpx;
    bottom: 36rpx;
    padding: 2rpx 18rpx;
    background: rgba(0, 0, 0, 0.363);
    border-radius: 50rpx;
    color: #fff;
    font-size: 26rpx;
  }
</style>