个人技术分享

Swiper滑动切换图片

可以切换焦点图，兼容小程序

<template>
	<view class="cc-swiper-container" v-if="imageList.length > 0">
		<swiper class="swiper"
			:class="swiperClassName" 
			:circular="circular" 
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:interval="interval" 
			:duration="duration"
			:disable-touch="disableTouch">
			<swiper-item v-for="(item, index) in imageList" :key="index">
				<image :src="item.image" mode="aspectFit" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import { useAttrs, computed } from 'vue'
	
	const props = defineProps({
		imageList: {
			type: Array,
			default: []
		},
		circular: {
			type: Boolean,
			default: true
		},
		indicatorDots: {
			type: Boolean,
			default: true
		},
		autoplay: {
			type: Boolean,
			default: true
		},
		interval: {
			type: Number,
			default: 4000
		},
		duration: {
			type: Number,
			default: 300
		},
		disableTouch: {
			type: Boolean,
			default: false
		},
		swiperClassName: {
			type: String,
			default: ''
		}
	})
</script>

<style scoped lang="scss">
.cc-swiper-container {
	width: 100%;
	padding: $cc-space;
	box-sizing: border-box;
	.swiper {
		border-radius: 10rpx;
		overflow: hidden;
		height: 240px;
	}
	swiper-item {
		image {
			width: 100%;
			background: #fff;
		}
	}
}
</style>

使用

<cc-swiper-img :imageList="state.imageList" />

效果图