VUE3----Swiper滑动切换图片

damys

已于 2024-04-26 11:54:56 修改

阅读量533

点赞数 3

分类专栏： Vue3 文章标签： javascript 前端 vue.js Swiper滑动切换图片

于 2024-04-26 11:53:09 首次发布

本文链接：https://blog.csdn.net/damys/article/details/138214457

版权

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: