微信小程序实现轮播图

微信小程序轮播图要用到swiper组件，即滑块视图容器
wxml代码

wxss代码

.content {
  display: flex;
  justify-content: center;
}

.imgStyle {
  width: 120rpx;
  height: 80rpx;
  border:1px solid red;
  margin: 4rpx;
  margin-top: 8rpx;
  transition: all 0.6s;
}

js代码

Page({
  data: {
    list: [{
        urlImg: '../../img/1.png'
      },
      {
        urlImg: '../../img/2.png'
      },
      {
        urlImg: '../../img/3.png'
      },
      {
        urlImg: '../../img/4.png'
      },
      {
        urlImg: '../../img/5.png'
      },
    ],
    swiperCurrent: 0,
    windowWidth: wx.getSystemInfoSync().windowWidth
  },
  move: function(e) {
    // console.log(e)
    this.setData({
      swiperCurrent: e.currentTarget.dataset.i
    })
  },
  swiperChange: function(e) {
    // console.log(e)
    this.setData({
      swiperCurrent: e.detail.current
    })

  }
})