menber-center/components/lgSwiper.vue

<template>
	<view class="container">
		<swiper class="swiper" :circular="true" :autoplay="false" :duration="500" :previous-margin="'200rpx'"
			:next-margin="'200rpx'" :style="{ height: '300rpx' }" :current="currentIndex"
			:easing-function="easeInOutCubic"
			@change="changeCurrent">
			<swiper-item v-for="(slide, index) in processedSildeItems" :key="index" style="overflow: initial;"
				:class="index==currentIndex? 'swiper-item-active':'swiper-item-normal'" @click="swiperClick(slide)">
				<!-- <view :class="index==currentIndex? 'swiper-item active':'swiper-item'">
					<view style="width: 100%;height: 90%;">
						<image style="width: 100%;height: 100%;" mode="aspectFit" :src="slide[image]"></image>
					</view>
					<view style="width: 100%;overflow: hidden;white-space: nowrap;">
						<text class="swiper-text">{{ slide[title] }}</text>
					</view>
				</view> -->
				<view :class="index==currentIndex? 'swiper-item active':'swiper-item'">
					<image style="width: 100%;height: 90%;" mode="aspectFill" :src="slide[image]"></image>
					<text class="swiper-text">{{ slide[title] }}</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0
			};
		},
		methods: {
			changeCurrent(e) {
				this.currentIndex = e.detail.current
			},
			swiperClick(data){
				this.$emit('swiperClick', data);
			}
		},
		props: {
			sildeItems: {
				type: Array,
				required: true
			},
			image: {
				type: String,
				required: false,
				default: "image"
			},
			title: {
				type: String,
				required: false,
				default: "title"
			}
		},
		computed: {
			processedSildeItems() {
				return [...this.sildeItems, ...this.sildeItems];
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper {
		width: 100%;
		overflow: visible;
		/* 确保部分滑块可见 */
		height: 100%;
		padding: 0 25rpx;
	}

	.swiper-item-active {
		z-index: 10;
		display: flex;
		align-items: center;
		.swiper-text {
				font-weight: bold;
				display: inline-block;
			  // animation: marquee 10s linear infinite;
			  /* 以下属性防止文字换行 */
			  white-space: nowrap;
			}
	}
	@keyframes marquee {
	  0% {
	    transform: translateX(20%);
	  }
	  100% {
	    transform: translateX(-100%);
	  }
	}

	.swiper-item-normal {
		z-index: 1;
		display: flex;
		    align-items: center;
	}

	.swiper-item {
		display: flex;
		height: 80%;
		width: 85%;
		margin: 0 auto;
		justify-content: flex-end;
		align-items: center;
		font-size: 16rpx;
		border-radius: 10px;
		flex-direction: column;
		color: #000;
		.swiper-text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 10rpx;
			
		}
	}

	.active {
		// display: flex;
		height: 100%;
		width: 93%;
		margin: auto;
		justify-content: center;
		font-size: 25rpx;
		.swiper-text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>