uni-app 开发APP 自定义轮播图 swiper 指示点位置和样式

本文介绍一种简单的方法:深度作用选择器 /deep/
*很多评论说没有效果,于是重新看了一下自己的代码,发现不是自己代码问题,所以请你们先仔细看看自己的代码再来评论

<swiper class="uni-swiper-wrapper" indicator-dots circular autoplay interval=3000>
	<swiper-item v-for="(item,index) in swipers" :key="index">
		<image :src="item.src"></image>
	</swiper-item>
</swiper>
//设置轮播的指示点大小
	.uni-swiper-wrapper {

		/deep/ .uni-swiper-dots {
			// 指示点整个区域的位置
			top: 310rpx;
		}

		/deep/ .uni-swiper-dot {
			// 指示点元素默认样式
			width: 9upx !important;
			height: 9upx !important;
			background: #C0C0C0 !important;
		}

		/deep/ .uni-swiper-dot-active {
			// 指示点元素激活(当前选中)状态样式
			width: 32upx !important;
			height: 8upx !important;
			background: #42E2CD !important;
			border-radius: 4rpx;
		}
	}

效果:
在这里插入图片描述
*很多评论说没有效果,于是重新看了一下自己的代码,发现不是自己代码问题,所以请你们先仔细看看自己的代码再来评论

//设置轮播的指示点大小
	.uni-swiper-wrapper {

		/deep/ .uni-swiper-dots {
			// 指示点整个区域
			top: 280rpx;    // 比较原先代码 - 修改后为280rpx
		}

		/deep/ .uni-swiper-dot {
			// 指示点元素默认样式
			width: 18upx !important;   //  比较原先代码 - 修改后为18upx
			height: 18upx !important;   //  比较原先代码 - 修改后为18upx
			background: #000000 !important;  // 比较原先代码 - 修改背景颜色
			// border: 1rpx solid #E0B079;
		}

		/deep/ .uni-swiper-dot-active {
			// 指示点元素激活(当前选中)状态样式
			// background: #CD9763;
			width: 40upx !important;  // 比较原先代码 - 修改后为40upx
			height: 8upx !important;
			background: #42E2CD !important;
			border-radius: 4rpx;
		}
	}

在这里插入图片描述

评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值