小程序 优质轮播图

wxml层

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  previous-margin="{{previousMargin}}" 
  next-margin="{{nextMargin}}"
  circular="{{circular}}"
  bindchange="swiperBindchange"
>
  <block wx:for="{{date}}">
    <swiper-item>
      <image src="{{item.imgage}}" class="slide-image {{currentSwiperIndex == index ? 'zoom-in' : 'zoom-out'}}"/>
    </swiper-item>
  </block>
</swiper>

wxss层

swiper{
  margin-top: 50rpx;
}
 
.slide-image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
 
.zoom-out {
  transform: scale(0.8);
  transition: all 0.7s ease-out 0s;
}
 
.zoom-in {
  transform: scale(1);
  transition: all 0.7s ease-in 0s;
}

js层

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    date:[],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动播放
    interval: 3000, //停留时间间隔
    duration: 1000, //播放时长
    previousMargin: '50px', //前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
    nextMargin: '50px', //后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
    circular: true, //是否采用衔接滑动
    currentSwiperIndex: 0
  },
  swiperBindchange(e) {
    this.setData({
      currentSwiperIndex: e.detail.current
    })
  },

  // 事件处理函数
onLoad() {
  var _this = this;
  wx.login({
    success:function(res){
      console.log(res.code)
      wx.request({
        url: 'http://www.tp.com/API/JWTLogin',
        header:{
            "token":wx.getStorageSync('token')
        },
        success:function(api){
          console.log(api.data.date);
          _this.setData({
            date:api.data.date
          })
          // wx.setStorageSync('token', api.data.token)
        }
      })
    }
  })
}
})