All Products
Search
Document Center

Swiper

Last Updated: Feb 04, 2021

Slider view container.

Attribute Type Default value Description Minimum version
indicator-dots Boolean false Whether to display the indicator. -
indicator-color Color rgba(0, 0, 0, .3) Color of the indicator. -
indicator-active-color Color #000 Color of the indicator selected. -
active-class String - class when swiper-item is visible. 1.13.7
changing-class String - class when multiple screens are visible if acceleration is set to {{true}} during sliding. 1.13.7
autoplay Boolean false Whether to enable automatic switchover. -
current Number 0 Index of the current page. -
duration Number 500 (ms) Sliding animation duration. -
interval Number 5000 (ms) Interval of automatic switchover. -
circular Boolean false Whether to enable unlimited sliding. -
vertical Boolean false Whether the sliding direction is vertical. -
previous-margin String ‘0px’ Front margin, in px. Version 1.9.0 supports the horizontal direction only. 1.9.0
next-margin String ‘0px’ Rear margin, in px. Version 1.9.0 supports the horizontal direction only. 1.9.0
acceleration Boolean false If this function is enabled, multiple screens can be slid continuously based on the sliding speed. 1.13.7
disable-programmatic-animation Boolean false Whether to disable animations when a code change triggers the swiper switchover. 1.13.7
onChange EventHandle - Triggered by a current change. event.detail = {current, isChanging}. isChanging has a value when acceleration is set to {{true}}. During multiple screen sliding, when several screens trigger the onChange event and isChanging is true, the last screen returns false. -
onTransition EventHandle - The transition event is triggered when the position of swiper-item in swiper changes. 1.15.0
onAnimationEnd EventHandle - The animationEnd event is triggered after the animation ends. event.detail = {current, source}. The value of “source” can be autoplay or touch. 1.15.0
disable-touch Boolean false Whether to disable the touch operation of the user. 1.15.0

swiper-item

swiper-item can be placed only in the swiper component. The width and height are automatically set to 100%.

Illustration

screenshoot

Code sample

  1. <swiper
  2. indicator-dots="{{indicatorDots}}"
  3. autoplay="{{autoplay}}"
  4. interval="{{interval}}"
  5. >
  6. <block a:for="{{background}}">
  7. <swiper-item>
  8. <view class="swiper-item bc_{{item}}"></view>
  9. </swiper-item>
  10. </block>
  11. </swiper>
  12. <view class="btn-area">
  13. <button class="btn-area-button" type="default" onTap="changeIndicatorDots">indicator-dots</button>
  14. <button class="btn-area-button" type="default" onTap="changeAutoplay">autoplay</button>
  15. </view>
  16. <slider onChange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
  17. <view class="section__title">interval</view>
  1. Page({
  2. data: {
  3. background: ['green', 'red', 'yellow'],
  4. indicatorDots: true,
  5. autoplay: false,
  6. interval: 3000,
  7. },
  8. changeIndicatorDots(e) {
  9. this.setData({
  10. indicatorDots: !this.data.indicatorDots
  11. })
  12. },
  13. changeAutoplay(e) {
  14. this.setData({
  15. autoplay: !this.data.autoplay
  16. })
  17. },
  18. intervalChange(e) {
  19. this.setData({
  20. interval: e.detail.value
  21. })
  22. },
  23. })