背景：
在我们做项目的时候，经常会碰到这样一个问题：小程序原生的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;
}
复制代码
