对您有帮助的话，给 小生 点个赞吧 ∩▂∩ ！！！

实现轮播切换效果：切换时图片大小有变化

逻辑层js:

swiper:{
      previousMargin:"52rpx",
      nextMargin:"52rpx",
      current:1,
      activeItem:"slider-item-active",
      indicatorDots:true,
      indicatorColor:"#ddd",
      indicatorActiveColor:"#009f7f",
      autoplay:false,
      interval:5000,
      circular:true,
      img:[{index:0,src:"../../resources/slider1.png"},
      {index:1,src:"../../resources/slider2.png"},
      {index:2,src:"../../resources/slider3.png"}]
    }
  },
  ChangeActive(e){  
    const index=e.detail.current;
    this.setData({
       swiper:{...this.data.swiper,...{current:index}} //修改current的值
    });
  }

视图层wxml:

<!-- swiper轮播 -->
<swiper class="slider"
previous-margin="{{swiper.previousMargin}}"
next-margin="{{swiper.nextMargin}}"
current="{{swiper.current}}"
indicator-dots="{{swiper.indicatorDots}}"
indicator-color="{{swiper.indicatorColor}}"
indicator-active-color="{{swiper.indicatorActiveColor}}"
autoplay="{{swiper.autoplay}}"
interval="{{swiper.interval}}"
circular="{{swiper.circular}}"
bindchange="ChangeActive"
>
<block wx:for="{{swiper.img}}" wx:key="*this">
  <swiper-item class="slider-item {{swiper.current===item.index?swiper.activeItem:''}}">
  <image class="slider-item-img" src="{{item.src}}"></image>
</swiper-item>
</block>


</swiper>

视图层 wxss:

/* swiper轮播组件 */

.slider-item{
  width:100%;
  box-sizing: border-box;
  padding:0rpx 0rpx;
  
}
.slider-item-img{
  width: 100%;
  height: 258rpx;
  border-radius: 12rpx;
  transform: scale3d(0.93,0.93,0.93);
  transition: all 0.36s;
 
}
.slider-item-active .slider-item-img{
  transform: scale3d(1,1,1);
}

实现轮播图切换。中间放大两边小。

<swiper bindchange="swiperChange" previous-margin="205rpx" next-margin="205rpx" 

  class="stadium-swiper" circular>

    <swiper-item wx:for='{{gymList}}' wx:key='Id' style="overflow: inherit;">

      <image class='le-img {{nowIdx==index?"le-active":""}}' src='{{item.RemoteUrl}}'/>

    </swiper-item>

  </swiper>

css:

.stadium{

  background: #FFFFFF;

  padding-bottom: 29rpx;

  margin-bottom: 20rpx;

}

.le-img {

  display: block;

  width: 350rpx;

  height: 250rpx;

  border-radius: 10rpx;

  transform: scale(0.8);

  transition: all 0.3s ease;

}

.le-active{

  transform: scale(1)

}

js:

data: {

    nowIdx: 0, //当前swiper索引

    imgList: [

      "banner/stadium1.png",

      "banner/stadium2.png",

      "banner/stadium3.png",

      "banner/banner.png"

    ],

  },

  /**

   * 组件的方法列表

   */

  methods: {

    //swiper滑动事件

    swiperChange: function (e) {

      this.setData({

        nowIdx: e.detail.current

      })

    },

  }

})

通过previous-margin,next-margin控制图片间距。

因为我一个item里面有两个元素，多个item之间没有间距

为啥要做这种事呢