修改dot形状
.wx-swiper-dots .wx-swiper-dot{
width: 40rpx; /*宽*/
height: 10rpx; /*高*/
border-radius: 4rpx; /*圆角*/
}
修改dot之间的间距
.wx-swiper-dots .wx-swiper-dot:nth-of-type(n+2) {
margin-left: 30rpx;
}
调整dot整体位置
/* 调成dots的位置 */
/* 顶部 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
top: 40rpx;
}
/* 中间 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
top: 50%;
}
/* 右下角 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
width: 90%;
text-align: right;
}
/* 左下角 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
width: 90%;
text-align: left;
}
/* 左上角 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
top: 40rpx;
width: 90%;
text-align: left;
}
/* 右上角 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
top: 40rpx;
width: 90%;
text-align: right;
}
注意:这里调整dots位置的代码只适用于vertical属性默认为false的时候,如果vertical属性设置为true,.wx-swiper-dots-horizontal 这个选择器需要改为 .wx-swiper-dots-vertical,并且代码需要做相应修改。其实重写样式的时候 .wx-swiper-dots-horizontal 这个选择器可有可无,我这里这样写只是为了方便理解,表示上面这些代码只适用于默认情况(vertical属性为false时)。vertical为true的情况可以根据上面的代码举一反三。