swiper

2022-07-04 03:44

Swiper view container

Property	Type	Default	Description
indicator-dots	Boolean	false	Show indicator or not.
indicator-color	Color	rgba(0, 0, 0, .3)	Indicator color.
indicator-active-color	Color	#000	Color of currently selected indicator.
autoplay	Boolean	false	Auto switch or not.
current	Number	0	Current page index.
duration	Number	500(ms)	Swipe animation duration.
interval	Number	5000(ms)	Auto switch interval.
circular	Boolean	false	Enable infinite swipe or not.
vertical	Boolean	false	Is swipe direction vertical or not.
onChange	EventHandle	No	Trigger on current change, event.detail = {current, current}.

Swiper-item

Can place in component or not; width and height are automatically set as 100%.

Sceenshot

Sample Code

copy
<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
>
  <block a:for="{{background}}">
    <swiper-item>
      <view class="swiper-item bc_{{item}}"></view>
    </swiper-item>
  </block>
</swiper>
<view class="btn-area">
  <button class="btn-area-button" type="default" onTap="changeIndicatorDots">indicator-dots</button>
  <button class="btn-area-button" type="default" onTap="changeAutoplay">autoplay</button>
</view>
<slider onChange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
<view class="section__title">interval</view>

copy
Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,
    autoplay: false,
    interval: 3000,
  },
  changeIndicatorDots(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },
})