3-12 swiper components

swiper

Infrastructure Library 1.0.0 started to support low version to be made compatible with the process .

Slider view of the container. Which can only be placed swiper-item components, otherwise it will lead to undefined behavior.

Attributes	Types of	Defaults	Mandatory	Explanation	Minimum version
indicator-dots	boolean	false	no	Display panel indicates whether point	1.0.0
indicator-color	color	rgba (0, 0, 0, .3)	no	Indicating some color	1.1.0
indicator-active-color	color	#000000	no	The currently selected color to indicate	1.1.0
autoplay	boolean	false	no	Whether to automatically switch	1.0.0
current	number	0	no	The current index where the slider	1.0.0
interval	number	5000	no	Automatic switching time interval	1.0.0
duration	number	500	no	Long time sliding animation	1.0.0
circular	boolean	false	no	Whether to adopt the convergence slide	1.0.0
vertical	boolean	false	no	Direction is a longitudinal sliding	1.0.0
previous-margin	string	"0px"	no	Front margins, for exposing a small portion of a front, acceptance values ​​px, and rpx	1.9.0
next-margin	string	"0px"	no	After padding, may be used to expose a small portion of a rear, acceptance values ​​px, and rpx	1.9.0
display-multiple-items	number	1	no	At the same time the number of slide shows	1.9.0
skip-hidden-item-layout	boolean	false	no	Whether to skip the slide layout is not displayed, set to true to optimize the sliding performance in complex situations, but lost hidden slide layout information	1.9.0
easing-function	string	"default"	no	Designated swiper switching easing animation type	2.6.5
bindchange	eventhandle		no	current event is triggered when changing change, event.detail = {current, source}	1.0.0
bindtransition	eventhandle		no	Swiper-item will trigger location change event transition, event.detail = {dx: dx, dy: dy}	2.4.3
bind collimation finish	eventhandle		no	Animationfinish event is triggered when the animation ends, event.detail ibid.	1.9.0

Legal value of easing-function

value	Explanation	Minimum version
default	Default easing function
linear	Linear animation
easeInCubic	Ease animation
easeOutCubic	Ease Out Animation
easeInOutCubic	Ease Ease Out Animation

changeEvent  source return value

From  1.4.0  start, changethe event increased  sourcefield that indicates the cause of the change, the possible values are as follows:

1. autoplay Autoplay lead swiper change;
2. touch Swipe swiper user causes a change;
3. Other reasons will be indicated by an empty string.

Bug & Tip

1. tip: If  bindchange the event callback function is used  setData to change the  current value, it could lead to  setData being kept calling, so please usually change  current before the value of the detection  source field to determine whether the cause is due to a user's touch.

Sample Code

Preview in Developer Tools

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/>
<slider bindchange="durationChange" show-value min="1000" max="10000"/>

Page({
  data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

swiper-item

Infrastructure Library 1.0.0 started to support low version to be made compatible with the process .

It may be placed only in the swiper assembly, width and height is automatically set to 100%.

Attributes	Types of	Defaults	Mandatory	Explanation	Minimum version
item-id	string		no	The swiper-item identifier	1.9.0