微信小程序轮播图指示点自定义（修改原生指示点样式）

1.实现效果

2.实现原理

修改swpier原生指示点的样式。

.wx-swiper-dots.wx-swiper-dots-horizontal.wx-swiper-dot .wx-swiper-dot::before.wx-swiper-dot-active

3.主要代码

css样式：

/* pages/dots/index2.wxss *//*轮播图*/swiper {height: 783rpx;}.swiper-item {border-radius: 0;}.slide-image {display: block;width: 100%;height: 783rpx;}/* 指示点距离底部的距离 */.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {margin-bottom: 110rpx;/* display: flex; */}.swiper-box .wx-swiper-dot {display: inline-flex;/*inline-flex表示 将对象作为内联弹性伸缩盒显示 等同于给父级元素添加display：flex*/margin-left: -8rpx;justify-content: space-between;}.swiper-box .wx-swiper-dot::before {content: '';flex-grow: 1;background: rgba(255, 255, 255, 1);border-radius: 8rpx;width: 16rpx;}.swiper-box .wx-swiper-dot-active {width: 60rpx;border-radius: 8rpx;background: #fff;opacity: 0.57;}

4.写在最后🍒

看完本文如果觉得有用，记得点赞+关注+收藏鸭 🍕

更多小程序相关，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~