微信小程序-swiper轮播图

效果：

一般用于首页的展示页面

直接附上代码：在index.wxml

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <image src="{{item}}" class="slide-image" /> 
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
</view>

index.wxss:样式可做参考，可自行设置图片宽度高度

@import "./weui.wxss";

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}
.page-body{
  padding-top:10rpx;
}
.page-section{
  width: 100%;
  margin-bottom: 10rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 10rpx;
}
.slide-image{
  width:100%;
  height:230px;
}

index.js中设置轮播图片的地址，是否显示面板指示点，是否自动切换，切换时间等

Page({
  data: {
    background: [
      '../../images/bad0.png',
      '../../images/bad1.jpg',
      '../../images/bad3.jpg',
      '../../images/tennis.jpg'
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    circular: false,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0
  }
})

常用的swiper属性如下：

更多参考详见官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html