小程序轮播图 swiper当前滑块容器样式

官网截图 主要是这两个参数配置 可以让当前滑块露出前一项和后一项的一部分

轮播部分
<swiper style="height:260rpx" class="swiper" previous-margin='30' next-margin='30' @change="swiperChange" :circular="true" :indicator-dots="true" :autoplay="true" :interval="6000" :duration="500">
            <block v-for="(item, index) in swiperList" :key="index">
                <swiper-item>
                    <div class="swiper-item" :class="currentIndex == index ? '': 'not-active'">
                        <div style="margin-top: 30rpx;">
                            <p class="num">{{item.total}}</p>
                            <p class="words">{{item.type}}</p>
                        </div>
                        <div style="margin-top: 30rpx;">
                            <p class="num">{{item.normal}}</p>
                            <p class="words">当月正常使用</p>
                        </div>
                        <div style="margin-top: 16rpx;">
                            <p class="percent">{{item.rate}}</p>
                            <p class="progress"><span :style="'width:'+item.rate"></span></p>
                            <p class="rate">溯源平台使用率</p>
                        </div>
                    </div>
                </swiper-item>
            </block>
        </swiper>

data中定义 currentIndex:‘0’

    // 轮播
    swiperChange(e){
        this.currentIndex = e.mp.detail.current
    }

//非当前滑块的样式
.not-active{
    scale: 0.9;
}

// 指示点样式
.swiper /deep/ .wx-swiper-dot{
  width: 10rpx;
  height: 10rpx;
  border-radius: 10rpx;
  border: 1px solid rgba(124, 165, 255, 1);
  }

效果展示