修改小程序swiper 点的样式_小程序swiper样式修改

背景：

在我们做项目的时候，经常会碰到这样一个问题：小程序原生的swiper样式满足不了设计稿的需求。这样的话，我们就必须手动的去改小程序原生的swiper的样式了。

实现效果一：

html主要代码：

autoplay="{{autoplay}}"

interval="{{interval}}"

duration="{{duration}}"

previous-margin="48rpx"

next-margin="48rpx"

current="activeIndex"

bindchange="switchCard"

>

复制代码css主要代码：

.swiper-item{

display: flex;

flex-direction: column;

align-items: center;

border: 2rpx solid #E1E1E1;

padding: 80rpx 40rpx 70rpx;

border-radius: 16rpx;

background: #FFFFFF;

width: 570rpx;

height: 864rpx;

transform: scale(0.9);

opacity: 1;

}

.current{

transform: scale(1);

opacity: 1;

}

复制代码js主要代码：

data: {

indicatorDots: true,

vertical: false,

autoplay: false,

interval: 2000,

duration: 500,

activeIndex: 0,

},

switchCard(e) {

let current = e.detail.current;

this.setData({ activeIndex: current });

},

复制代码实现效果二：小程序修改轮播图的 面板指示点 样式

主要类名：

wx-swiper-dots

wx-swiper-dots-horizontal

wx-swiper-dot

wx-swiper-dot-active

修改面板指示点的大小、形状

css代码：

/* 修改点的位置：居右 */

.wx-swiper-dots{

position:relative;

left: unset!important;

right: 20rpx;

}

.wx-swiper-dots.wx-swiper-dots-horizontal{

margin-bottom: -5rpx;

}

.wx-swiper-dot{

/* 修改点的大小 */

width: 10rpx;

height: 10rpx;

/* 修改点跟点之间的间距 */

margin-left: -8rpx;

}

复制代码