zsw-farm-bxg/components/ProductConSwiper.vue

<template>
  <view class="slider-banner product-bg">
    <swiper
      class="swiper-wrapper"
      @change="handleChange"
      v-if="imgUrls.length > 0"
    >
      <block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex">
        <swiper-item>
          <image :src="item" @tap="previewImage(imgUrlsIndex)" class="slide-image" mode="aspectFill"/>
        </swiper-item>
      </block>
    </swiper>
    <!-- <swiper class="swiper-wrapper" :options="ProductConSwiper" v-if="imgUrls.length > 0">
      <swiperSlide class="swiper-slide" v-for="item in imgUrls" :key="item" ref="goodSwiper">
        <image :src="item" class="slide-image" />
      </swiperSlide>
    </swiper>-->
		<view class="dots-box acea-row row-center">
			<view :class="'dot ' + (currents == index?'on':'')" v-for="(item,index) in imgUrls.length" :key="index"></view>
		</view>
    <!-- <view class="pages">{{ currents || 1 }}/{{ imgUrls.length || 1 }}</view> -->
  </view>
</template>
<script>
// import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "ProductConSwiper",
  components: {
    // swiper,
    // swiperSlide
  },
  props: {
    imgUrls: {
      type: Array,
      default: () => [],
    },
  },
  data: function () {
    let that = this;
    return {
      currents: 0,
      ProductConSwiper: {
        autoplay: {
          disableOnInteraction: false,
          delay: 2000,
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true,
        on: {
          slideChangeTransitionStart: function () {
            that.currents = this.realIndex + 1;
          },
        },
      },
    };
  },
  mounted: function () {},
  methods: {
    handleChange(event) {
      this.currents = event.mp.detail.current;
      // this.currents = event.mp.detail.current + 1;
    },
    previewImage(current) {
      uni.previewImage({
        current,
        urls: this.imgUrls,
      });
    },
  },
};
</script>
<style lang="less" scoped>
	.dots-box {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		padding-top: 16rpx;
		.dot {
			width: 8rpx;
			height: 8rpx;
			background: #FFFFFF;
			border-radius: 50%;
			margin: 0rpx 8rpx;
		}
		.on {
			width: 34rpx;
			background: #2DB5AE;
			border-radius: 6rpx;
			transition: width .4s;
		}
	}
</style>