uniapp swiper 修改指示点位置、修改指示点样式，支持H5、微信小程序、APP、支付宝小程序

liokF

已于 2024-06-28 16:24:11 修改

阅读量2.9k

点赞数 10

文章标签： uni-app 微信小程序小程序 css

于 2024-04-27 11:49:36 首次发布

本文链接：https://blog.csdn.net/weixin_51604420/article/details/138245352

版权

目前只测试了H5、微信小程序和APP，支付宝小程序，其他请自行测试

注意事项：
1、H5、微信小程序和APP都支持调整指示点样式和位置，而支付宝小程序只支持调整指示点样式不支持调整指示点位置，如果是支付宝小程序可以选择自定义指示点。
2、调整指示点的位置时，需要结合transform: translate();去调整，因为.uni-swiper-dots-horizontal这个class原本设置的是transform: translate(50%);如果你不结合这个css属性去调整位置，指示点可能无法达到预期位置。

			//未选中的指示点样式，支持h5、app
			& /deep/ .uni-swiper-dot{
				width: 6rpx;
				height: 6rpx;
				background: #FFFFFF;
				border-radius: 50%;
			}
			//未选中的指示点样式，支持微信小程序
			 & /deep/ .wx-swiper-dot {
				 width: 6rpx;
				 height: 6rpx;
				 background: #FFFFFF;
				 border-radius: 50%;
			}
			//未选中的指示点样式，支持支付宝小程序
			& /deep/ .a-swiper-dot{
				width: 12rpx;
				height: 13rpx;
				background: #D6D6D6;
				margin: 0 10rpx;
				border-radius: 50%;
			}
			//选中的指示点样式，支持h5、app
			& /deep/ .uni-swiper-dot-active{
				width: 18rpx;
				height: 6rpx;
				background: #24EA8C;
				border-radius: 0;
			}
			//选中的指示点样式，支持微信小程序
			 & /deep/ .wx-swiper-dot-active {
				width: 18rpx;
				height: 6rpx;
				background: #24EA8C;
				border-radius: 0;
			}
			//选中的指示点样式，支持支付宝小程序
			& /deep/ .a-swiper-dot-active{
				width: 12rpx;
				height: 13rpx;
				background: #0054FF;
				margin: 0 10rpx;
				border-radius: 50%;
			}
			//指示点位置，支持h5、app
			& /deep/ .uni-swiper-dots-horizontal{
				bottom: 200rpx;
				left: 100rpx;
			}
			//指示点位置，支持微信小程序
			& /deep/ .wx-swiper-dots-horizontal{
				bottom: 200rpx;
				left: 100rpx;
			}