微信小程序|组件-轮播图swiper

1. 效果样式

2. 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>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
</view>

 

3. js代码

Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,//指示点是否显示
    vertical: false,//是否竖向滑动
    autoplay: false,//自动播放
    circular: false,//衔接滑动
    interval: 2000,//自动播放时的间隔时长
    duration: 500,//滑动过一张图片的时长
    previousMargin: 0,//前边距
    nextMargin: 0 //后边距
  }
})