【微信小程序swiper指示点样式修改】

鹈鹕镇乡民某miao

于 2025-06-23 17:17:27 发布

阅读量253

点赞数 2

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_69315397/article/details/148850661

<view class="swiper" v-if="sliderImage.length">
						<swiper class="swiper-box" :autoplay="true" :circular="circular" :interval="interval"
							:duration="duration" :indicator-dots="true">
							<block v-for="(item,index) in sliderImage" :key="index">
								<swiper-item class="swiper-item">
									<image :src="item" class="slide-image" lazy-load></image>
								</swiper-item>
							</block>
						</swiper>
					</view>

样式：

.swiper {
			height: 100%;
			width: 100%;

			.slide-image {
				height: 900rpx;
				width: 100%;
			}
		}


/*  #ifdef  MP-WEIXIN  */
	::v-deep swiper {
		height: 685rpx !important;
	}
	
	/* 默认指示点的样式 */
	::v-deep .swiper-box .wx-swiper-dot {
		width: 7rpx;
		height: 7rpx;
		background: #2B2E35;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}
	
	/* 选中指示点的样式 */
	::v-deep .swiper-box  .wx-swiper-dot-active {
		width: 30rpx !important;
		height: 7rpx !important;
		background: #2B2E35 !important;
		border-radius: 15rpx;
	}

	/*  #endif  */