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 //後邊距
  }
})