uniapp-轮播图效果

uniapp轮播图_白嫖leader的博客-CSDN博客_uniapp轮播图

参考上面博主二次添加效果 下面小点样式效果 自定义

下面代码直接可用  对应效果

<template>
	<view>
		<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
		<!-- vertical="true" //滑动方向是否为纵向 -->

		<view class="carousel">
			<swiper style="height: 363rpx;" indicator-color="pink" indicator-active-color="#fff" :autoplay="true"
				next-margin="80rpx" previous-margin="55rpx" @change="handlechange" :current="mycurrent"
				:indicator-dots="false" :circular="true" :interval="3000" :duration="1000">
				<swiper-item v-for="i,index in 3" :key="i">
					<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
						<!-- {{i}} -->
						<img src="https://s2.loli.net/2022/05/11/rHeUj2V7pWg6MyQ.jpg" style="width: 100%;height: 100%;"
							alt="" srcset="">
					</view>
				</swiper-item>
			</swiper>
			<!-- 底部小点的样式 -->
			<view class="locations">
				<view v-for="(item,list) in 3" :key="list" class="dots" :class="[list==mycurrent ? 'dot' : '']"></view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				mycurrent: 0,
			}
		},
		methods: {
			handlechange(e) {
				this.mycurrent = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.carousel {
		position: relative;

		.swiper-item {
			overflow: hidden;
			height: 100%;
			border-radius: 20rpx;
			// margin-right: 20rpx;
			// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
			// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
			// width: 450rpx;
			transform: scale(0.8);
			transition: all 0.5s ease;
			text-align: center;
			transition: all 0.5s ease-in-out;

			&.active {
				transform: scale(1);
			}

			.indicator-dots {
				width: 30px;
			}
		}

		.locations {
			width: 100%;
			position: absolute;
			bottom: 20rpx;
			// left: 100rpx;
			display: flex;
			justify-content: center;
		}

		.dots {
			z-index: 9;
			border-radius: 3rpx;
			width: 20rpx;
			height: 6rpx;
			background-color: #D6D3D3;
			margin-right: 20rpx;
			text-align: center;
		}

		.dot {
			background-color: #FE6336;
		}
	}
</style>