微信小程序-带放大效果的轮播图

版权声明：部分内容借鉴其他作者，如有侵权，请与我联系 https://blog.csdn.net/crabfrog/article/details/82769298

效果如图

WXML

  <!-- 轮播图 -->
  <view class='Carousel'>
    <view class="recommend">
      <view class="swiper-container">
        <swiper class="swiper" autoplay="auto" interval="2000" duration="500" bindchange="swiperChange" previous-margin="40px" next-margin="40px" circular="true">
          <block wx:for="{{slider}}" wx:key="unique">
            <swiper-item data-url="{{item.linkUrl}}">
              <image class='{{swiperCurrent==item.imgId?"img_current":"img"}}' src="{{item.picUrl}}" mode="widthFix"></image>
            </swiper-item>
          </block>
        </swiper>
        <!-- 指示点 -->
        <!-- <view class="dots">
          <block wx:for="{{slider}}" wx:key="unique">
            <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
          </block>
        </view> -->
      </view>
    </view>
  </view>

WXSS

.Carousel{
  margin-top: 49px;
  background-color: #fff;
}
.swiper-container{
  position: relative;
}
.swiper-container .swiper{
  padding-top: 8px;
  height: 380rpx;
  text-align: center;
}
swiper-item{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.swiper-container .swiper .img{
  width: 88%;
  height: 88%;
  border-radius: 10px;
}
.img_current{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.swiper-container .dots{
  position: absolute;
  right: 40rpx;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}
.swiper-container .dots .dot{
  width: 28rpx;
  height: 28rpx;
  margin: 0 10rpx;
  border-radius: 50%;
  background: #fff;
  transition: all .6s;
  font: 300 18rpx/28rpx "microsoft yahei";
  text-align: center;
}
.swiper-container .dots .dot.active{
  background: #f80;
  color:#fff;
}

JS

data: {    
    //轮播图
    slider: [
      { imgId: '0', linkUrl: 1, picUrl: '/images/swiper/swiper_1.png' },
      { imgId: '1', linkUrl: 2, picUrl: '/images/swiper/swiper_2.png' }, 
      { imgId: '2', linkUrl: 3, picUrl: '/images/swiper/swiper_3.png' },
       ],
    swiperCurrent: 0,
    }
    
      /**
   * 轮播图
   */
  swiperChange: function (e) {
    //把切换后当前的index传给<swiper>组件的current属性
    this.setData({
      swiperCurrent: e.detail.current
    })
  },

  //点击指示点切换
  // chuangEvent: function (e) {
  //   this.setData({
  //     swiperCurrent: e.currentTarget.id
  //   })
  // },