uniapp轮播效果

最新推荐文章于 2024-06-20 23:19:13 发布

Marry1.0

最新推荐文章于 2024-06-20 23:19:13 发布

阅读量302

点赞数

文章标签： uni-app 前端数据库

本文链接：https://blog.csdn.net/cunning_of_fox/article/details/134547099

版权

<template>
	<view>
		<view class="">
			<swiper :autoplay="false" :current="currentIndex" :circular="true" previous-margin="80rpx"
				next-margin="80rpx" :interval="3000" :duration="500" @change="swierChange">
				<swiper-item v-for="(item,i) in 5" :key="i">
					<image
						src="https://img0.baidu.com/it/u=110176915,621401482&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700758800&t=7844874e8ca5c4418b6592bf88693184"
						class="slide-image" :class="currentIndex === i?'active':''"></image>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				currentIndex: 0
			}
		},
		methods: {
			swierChange(e) {
				this.currentIndex = e.detail.current
			},
		},
	}
</script>



<style>
	.slide-image {
		position: absolute;
		height: 200rpx;
		width: 75vw;
		z-index: 5;
		opacity: 0.8;
		top: 18%;
		margin: 0 20rpx;
	}

	swiper {
		height: 60vw;
	}

	.active {
		opacity: 1;
		z-index: 10;
		height: 320rpx;
		width: 75vw;
		top: 7%;
		transition: all 0.2s ease-in 0s;
	}
</style>