midi-h5/component/swiper.vue

<template>
	<view class="container">
		<!-- 轮播图区域 -->
		<swiper class="swiper" :current="currentIndex" @change="onSwiperChange" :previous-margin="previewMargin + 'px'"
			:next-margin="previewMargin + 'px'" :circular="true" :autoplay="false">
			<swiper-item v-for="(item, index) in list" :key="index" style="align-content: center;">
				<view class="swiper-item" :class="{ active: currentIndex === index }" @click="handleClick(index)">
					<image class="image" :src="item.image" />
					<!-- <text class="title">{{ item.title }}</text> -->
				</view>
			</swiper-item>
		</swiper>

		<!-- 指示器 -->
		<!--    <view class="indicators">
      <view 
        v-for="(item, index) in list" 
        :key="index"
        class="dot"
        :class="{ active: currentIndex === index }"
        @click="switchTo(index)"
      ></view>
    </view> -->

		<!-- 控制按钮 -->
		<!--    <view class="controls">
      <button class="btn" @click="switchTo(currentIndex - 1)">上一张</button>
      <button class="btn" @click="switchTo(2)">跳转到第3张</button>
      <button class="btn" @click="switchTo(currentIndex + 1)">下一张</button>
    </view> -->
	</view>
</template>

<script>
	import xinR from '@/static/image/grade/cf-xinren.png';
	import fuH from '@/static/image/grade/cf-fuhao.png';
	import xingJ from '@/static/image/grade/cf-xingjue.png';
	import xingH from '@/static/image/grade/cf-xinghou.png';
	import xingW from '@/static/image/grade/cf-xingwang.png';
	export default {
		data() {
			return {
				currentIndex: 0,
				previewMargin: 30, // 左右露出的边距（单位px）
				list: [{
						id: 1,
						title: '图片1',
						image: xinR
					},
					{
						id: 2,
						title: '图片2',
						image: fuH
					},
					{
						id: 3,
						title: '图片3',
						image: xingJ
					},
					{
						id: 4,
						title: '图片4',
						image: xingH
					},
					{
						id: 5,
						title: '图片5',
						image: xingW
					}
				]
			}
		},
		methods: {
			// 切换轮播图
			switchTo(index) {
				if (index < 0) index = this.list.length - 1;
				if (index >= this.list.length) index = 0;
				this.currentIndex = index;
			},

			// 轮播图切换事件
			onSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},

			// 点击轮播项
			handleClick(index) {
				console.log('点击了第', index + 1, '张');
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.swiper {
		height: 300rpx;
		width: 100%;
	}

	.swiper-item {
		height: 266rpx;
		border-radius: 30rpx;
		overflow: hidden;
		/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
		transition: all 0.3s ease;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}

	.swiper-item.active {
		height: 266rpx;
		border-radius: 30rpx;
		transform: scale(1.05);
	}

	img {
		border-radius: 30rpx !important;
	}

	.image {
		flex: 1;
		width: 92%;
		height: 90%;
		border-radius: 30rpx;
	}

	.title {
		padding: 8px;
		text-align: center;
		background: rgba(0, 0, 0, 0.6);
		color: white;
		font-size: 14px;
	}

	.indicators {
		display: flex;
		justify-content: center;
		margin: 15px 0;
	}

	.dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #ccc;
		margin: 0 5px;
	}

	.dot.active {
		background-color: #007AFF;
		transform: scale(1.3);
	}

	.controls {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-top: 20px;
	}

	.btn {
		padding: 6px 12px;
		font-size: 14px;
		background-color: #007AFF;
		color: white;
		border-radius: 4px;
	}
</style>