微信小程序实现图片轮播

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/SunshineBlog/article/details/83003188

wxml页面代码：

<!--图片轮播 -->
<view class='swipercontainer'>
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" vertical='{{vertical}}' circular='{{circular}}'>
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image swipimg"/>
      </swiper-item>
    </block>
  </swiper>
</view>

js页面代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      ' ../../images/fl01.png',
      ' ../../images/fl02.png',
      ' ../../images/fl03.png'
    ],
    indicatorDots: true, //	是否显示面板指示点
    autoplay: true, //是否自动切换
    circular: true, //是否采用衔接滑动
    vertical: false, //滑动方向是否为纵向
    interval: 3000, //自动切换时间间隔
    duration: 100, //滑动动画时长
  }
})

wxss文件：

.swipercontainer {
  position: relative;
  left: 0rpx;
  right: 0rpx;
  width: 100%;
  /*height: 20%;*/
  background: red;
}

.swipimg {
  width: 100%;
}

详细文档请见微信开放平台：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html