小程序-swiper

效果

index.wxml

<swiper indicator-dots="true" autoplay="{{false}}" interval="5000" indicator-dots="{{false}}" indicator-color='#8a8a8a' indicator-active-color='#333' circular="true" class="swiper-block" bindchange="swiperChange" previous-margin="160rpx" next-margin="160rpx" current="0">
    <block wx:for="{{images}}" wx:key="index">
      <swiper-item class="swiper-item ">
        <image mode="aspectFill" src="{{item}}" class="slide-image {{currentIndex == index ? 'active' : 'common'}}" />
      </swiper-item>
    </block>
</swiper>
<view class="dots-box own-class">
    <view class="dots {{currentIndex == index ? 'bg-333' : ''}}" wx:for="{{images}}"></view>
  </view>
</view>

index.wxss

.swiper-block {
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  background: #fff;
  height: 350rpx;
  width: 100%; 
}

.swiper-item{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  overflow: unset;
  width: 366rpx;
  height: 300rpx;
  padding-top: 70rpx;
  padding-bottom: 70rpx;
  box-sizing: border-box;
}

.slide-image{
  height: 240rpx;
  width: 360rpx;
  border-radius: 10rpx;
  margin: 0rpx 20rpx ; 
  z-index: 1;
  box-shadow: 10rpx 5px 40rpx rgba(0, 0, 0,0.5);
}
.active{
  transform: scale(1.3);
  transition: all .5s ease-in 0s;
  z-index: 20;
  opacity: 1;
}
.common{
  transform: scale(1);
  transition: all .5s ease-in 0s;
  z-index: 0;
  opacity: 0.4;
}

.dots-box{
  display: flex;
  justify-content: center;
  align-items: center;
}

.dots{
  width: 30rpx;
  height: 6rpx;
  margin: 0 4rpx;
  background-color: #aaa;
  margin-top: -80rpx;
}
.bg-333{
  background-color: #333;
}

index.js

data: {
  currentIndex: 0
},


swiperChange(e){
  this.setData({
    currentIndex:e.detail.current
  })
},