menduner-uniapp/components/SwiperAd/index.vue

<template>
	<view v-if="!props.hide" :style="`width: ${props.width}; height: ${props.height};`">
		<view v-if="props.list?.length">
			<swiper
        class="swiper"
        circular
        :indicator-dots="props.indicatorDots"
        :autoplay="props.autoplay"
        :interval="props.interval"
        :duration="props.duration"
      >
				<swiper-item v-for="(item, index) in list" :key="'swiperItem'+index">
					<view>
            <image
              :mode="strType ? props.mode : item.mode"
              :src="strType ? item : item[props.imgUrlKey]"
               :style="`width: ${props.width}; height: ${props.height};`"
              @error="imageError"
            ></image>
          </view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script setup>
const props = defineProps({
  list: { type: Array, default: () => [] },
  indicatorDots: { type: Boolean, default: true }, // 是否显示面板指示点
  autoplay: { type: Boolean, default: true }, // 是否自动切换
  interval: { type: Number, default: 3000 }, // 自动切换时间间隔
  duration: { type: Number, default: 500 }, // 滑动动画时长
  strType: { type: Boolean, default: true }, // 数组类型或者对象类型
  imgUrlKey: { type: String, default: 'src' },
  mode: { type: String, default: 'aspectFill' }, // 图片裁剪、缩放的模式。aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来
  hide: { type: Boolean, default: false }, // 隐藏
  width: { type: String, default: '100%' },
  height: { type: String, default: '150px' },
})

const imageError = (e) => {
  console.error('image发生error事件，携带值为' + e?.detail?.errMsg)
}
</script>

<style scoped lang="scss">

</style>