微信小程序 - 考勤签到：第二课--swiper轮播图的使用

在微信小程序中，如何搭建自己的swiper轮播图???

---------------------------------------语法分割线-------------------------------------------------------------------------------

---------------------------------------实战分割线-----------------------------------------------------------------------------

/* ***.wwxml*/

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" previous-margin="15px" next-margin="10px" >
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="0" height="150"/>
    </swiper-item>
  </block>
</swiper>

/* ***.wss  */

.swiper {
  height: 400rpx;
  width: 100%;
  margin-left: 25rpx;
  padding: 0;
}
.swiper image {
  height: 100%;
  width: 110%;
  position:absolute;
}

/* ***.js */

Page({
  data: {
    imgUrls: [
      '../images/swipers/one.jpg',
      '../images/swipers/two.jpg',
      '../images/swipers/three.jpg'
    ],
    indicatorDots: true,
    circular:false,
    autoplay: true, 
    current:1,
    interval: 5000, 
    duration: 1000,
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

/* **.json */

{
  "navigationBarTitleText": "功能列表"
}

以上就是轮播图的代码，下面看看做好的效果：

----------------------------------------------------------------------------------------------------------------

转载 声明：本文为博主原创文章，未经博主允许不得转载。

----------------------------------------------------------------------------------------------------------------

文章中，有问题，可以在评论区评论，一起探讨编程中奥秘！

----------------------------------------------------------------------------------------------------------------

  来都来了，那就点个赞吧