小程序实现一个简单的swiper

Posted 2021-03-19 暮雪上的晨星

话不多说，上截图

 

 

 HTML

  <swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindchange="swiperChange" circular="true">
        <block wx:for="{{totalData.banners}}" wx:index="{{index}}" wx:key="bannerList">
          <swiper-item class="swiper-item">
            <image mode="aspectFill" src="{{item.cover}}" class="slide-image {{swiperIndex == index ? \'active\' : \'\'}}" />    
          </swiper-item>
        </block>
      </swiper>

css

.swiper-block {
  height: 320rpx;
  width: 100%;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: unset;
  text-align: center;
}

.slide-image {
  height: 230rpx;
  width: 526rpx;
  border-radius: 10rpx;
  box-shadow: 0px 3px 10px 0px rgba(51, 51, 51, 0.3);
  margin: 0 rpx 30rpx;
  z-index: 1;
}

.active {
  transform: scale(1.21);
  transition: all 0.2s ease-in 0s;
  z-index: 20;
}

js

  swiperChange(e) {
    const that = this;
    that.setData({
      swiperIndex: e.detail.current,
    })
  },