微信小程序：实现轮播图

实现步骤：
使用组件swiper，其它api参考文档。
效果实现：
如果不是当前图片，则将图片缩小为.8倍
为当前图片时，不做样式操作
使用transition属性实现滑动效果

<swiper
 indicator-dots
 indicator-color="green"
 indicator-active-color="#f49641"
 autoplay
 interval="3000"
 previous-margin="20rpx"
 next-margin="20rpx"
 bindchange="swiperChange"
 class="container"
>
   <block wx:for="{{imgSrc}}" wx:key="this">
   <swiper-item>
     <image src="{{item}}" class="image {{swiperIndex === index ? 'active' : 'quite'}}" />
   swiper-item>
   block>
swiper>

.container {
  height: 1000rpx;
}
.image {
  width: 100%;
  height: 100%;
  border-radius: 15rpx;
}

/* 当前图片 */
image.active{
  transform: none;
  transition: all .2s;
}
image.quite{
  transform: scale(.8);
  transition: all .2s;
}

const app = getApp();
Page({
  data:{
    // 图片地址
    imgSrc:[
      'https://file.moyublog.com/d/file/2021-02-17/e50db8f1b1ab841c863a49250b79d367.jpg',
      'https://img.tt98.com/d/file/pic/2018081420174325/5b63b5ccdad61.jpg',
      'https://img2.baidu.com/it/u=2344850090,2589644779&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
      'https://img1.baidu.com/it/u=536270855,1477431967&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
    ],
    swiperIndex:0, //当前轮播图下标
  },
  swiperChange(e){
    this.setData({
      swiperIndex:e.detail.current
    })
  }
})