menduner-uniapp/components/SwiperAd/index.vue

<template>
	<view v-if="!props.hide" :style="`height: ${props.height}; margin: ${props.margin}; padding: ${props.padding}`">
		<view v-if="props.list?.length">
			<swiper
        class="swiper"
        circular
        :indicator-dots="props.indicatorDots"
        :autoplay="props.autoplay"
        :interval="props.interval"
        :duration="props.duration"
        indicator-active-color="#fff"
      >
				<swiper-item v-for="(item, index) in list" :key="'swiperItem'+index" :style="`border-radius: ${props.borderRadius};`">
          <image
            :mode="props.mode"
            :src="strType ? item : item[props.imgUrlKey]"
             :style="`width: ${props.width}; height: ${props.height};`"
            @error="imageError"
            @click="emit('click', item)"
          ></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
const emit = defineEmits(['click'])
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: 'scaleToFill' }, // 图片裁剪、缩放的模式。aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来
  hide: { type: Boolean, default: false }, // 隐藏
  width: { type: String, default: '100%' },
  height: { type: String, default: '150px' },
  borderRadius: { type: String, default: '10px' },
  borderRadius: { type: String, default: '10px' },
  margin: { type: String, default: '10px' },
  padding: { type: String, default: '0' },
})

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

<style scoped lang="scss">
</style>