微信小程序swiper轮播图缩放效果
发布于 5 年前 作者 eyang 3319 次浏览 来自 分享

主要是借助了swiper的previous-margin、next-margin、circular属性，以及css动画。

circular：让图片循环连接上

previous-margin： 与前一张图片的间距


next-margin：与后一张图片的间距

previous-margin和next-margin可以使前后的图片漏出一小边，但是注意: 官方文档上说单位使用rpx和px都可以，经我测试使用rpx渲染会变形，一定要使用px。

代码

wxml:

<swiper class="carousel" indicator-dots="{{true}}"
      autoplay="{{true}}" interval="{{3000}}" duration="{{1000}}" previous-margin="50px" next-margin="50px" circular="true" bindchange="swiperChange">
      <swiper-item class="swiper-item" wx:for="{{carousel.imgs}}" wx:for-item="item">
        <image src="{{item.imgId}}" class="carousel-image {{carousel.currentIndex == index ? 'active' : 'quiet'}}" mode="scaleToFill"/>
      </swiper-item>
    </swiper>

wxss:

.carousel{
  width: 100%;
  height: 350rpx;
}
.carousel .carousel-image{
  width: 100%;
  height: 80%;
  border-radius: 9rpx;
}
.carousel .quiet {
  transform: scale(0.8333333);
  transition: all 0.5s ease-in 0s;
}
.carousel .active {
  transform: none;
  transition: all 0.5s ease-in 0s;
}

js:

Page({
  data: {
    carousel: {
      imgs: [],
      currentIndex: 0
    },
  },
 
  onLoad: function() {
    var that = this;
    that.getCarouselImgs();
  },
  //渲染轮播
  getCarouselImgs: function (e) {
    var that = this;
    wx.cloud.callFunction({
      name: 'db',
      data: {
        $url: 'getCarouselImgs'
      }
    }).then((res) => {
      var that = this;
      var carousel = {};
      carousel.imgs = res.result.data;
      carousel.currentIndex = 0;
      that.setData({
        carousel: carousel
      });
    }).catch((e) => {
      console.log(e);
    });
  },
  swiperChange: function (e) {
    var that = this;
    var carousel = that.data.carousel;
    carousel.currentIndex = e.detail.current;
    that.setData({
      carousel: carousel
    });
  }
})

我这里的图片是从云端获取的，你可以根据自己的需要修改


源码: http://market.zhenzikj.com/detail/98.html

回到顶部