小程序swiper样式修改

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

实现效果一：

• html主要代码：

<swiper class="swiper"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  <!-- 控制<swiper-item>之间的间距[[ -->
  previous-margin="48rpx"
  next-margin="48rpx"
  <!-- 控制<swiper-item>之间的间距]] -->
  current="activeIndex"
  bindchange="switchCard"
>
  <block wx:for="{{swipers}}" wx:key="*this" wx:index="index">
    <swiper-item>
      <view class="swiper-item {{activeIndex == index? 'current' : ''}}">
        <image class="choose__bd-pre" mode="aspectFill" src="{{item.img}}"></image>
      </view>
    </swiper-item>
  </block>
</swiper>

• 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;
}