微信小程序-swiper轮播图

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

效果：

一般用于首页的展示页面

直接附上代码：在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:样式可做参考，可自行设置图片宽度高度

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属性如下：

indicatorDots: true,	是否显示面板指示点
vertical: false,	滑动方向是否为纵向
autoplay: false,	是否自动切换
circular: false,	是否采用衔接滑动
interval: 2000,	自动切换时间间隔
duration: 500,	滑动动画时长

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