Mini program swiper combined with swiper-item implements banner carousel

swipe

The basic library is supported starting from 1.0.0, and lower versions need to be compatible .

WeChat Windows version : supported

WeChat Mac version : supported

Rendering framework support: Skyline (debugging using the latest Nighly tool), WebView

Function description

Slider view container. Only swiper-item components can be placed there, otherwise undefined behavior will result.

Common properties

Attributes	type	default value	Required	illustrate	Minimum version
indicator-dots	boolean	false	no	Whether to display panel indicator points	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	no	Pointer color	1.1.0
indicator-active-color	color	#000000	no	The color of the currently selected indicator point	1.1.0
autoplay	boolean	false	no	Whether to switch automatically	1.0.0
current	number	0	no	The index of the current slider	1.0.0
interval	number	5000	no	Automatic switching time interval	1.0.0
duration	number	500	no	Slide animation duration	1.0.0
circular	boolean	false	no	Whether to use connection sliding	1.0.0
vertical	boolean	false	no	Whether the sliding direction is portrait	1.0.0
display-multiple-items	number	1	no	Number of sliders displayed simultaneously	1.9.0
easing-function	string	"default"	no	Specify swiper to switch the easing animation type	2.6.5
bindchange	eventhandle		no	The change event will be triggered when current changes, event.detail = {current, source}	1.0.0
bindtransition	eventhandle		no	When the position of swiper-item changes, the transition event will be triggered, event.detail = {dx: dx, dy: dy}. Skyline only supports non-worklet component methods as callbacks.	2.4.3
bindanimationfinish	eventhandle		no	The animationfinish event will be triggered when the animation ends, event.detail is the same as above. Skyline only supports non-worklet component methods as callbacks.	1.9.0

Skyline unique properties

Attributes	type	default value	Required	illustrate	Minimum version
scroll-with-animation	boolean	true	no	Use animated transitions when changing current	2.29.0
cache-extent	number	0	no	Cache area size, a value of 1 means rendering the upper and lower screen areas in advance (swiper container size)	2.29.0
worklet:onscrollstart	worklet		no	Triggered when sliding starts, only supports worklet as callback. event.detail = {dx: dx, dy: dy}
worklet:onscrollupdate	worklet		no	Triggered when the sliding position is updated. Only worklets are supported as callbacks. event.detail = {dx: dx, dy: dy}
worklet:onscrollend	worklet		no	Triggered when the slide ends. Only worklets are supported as callbacks. event.detail = {dx: dx, dy: dy}

WebView specific properties

Attributes	type	default value	Required	illustrate	Minimum version
previous-margin	string	"0px"	no	Front margin, can be used to expose a small part of the previous item, accepts px and rpx values	1.9.0
next-margin	string	"0px"	no	Back margin, can be used to expose a small part of the following item, accepts px and rpx values	1.9.0
snap-to-edge	boolean	false	no	When the number of swiper-item is greater than or equal to 2, when circular is turned off and previous-margin or next-margin is turned on, you can specify whether this margin should be applied to the first and last elements.	2.12.1

`change`event `source` return value

Starting from 1.4.0 , a field changeis added to the event sourceto indicate the reason for the change. The possible values are as follows:

autoplay Automatic playback causes swiper changes;
touch The user's swipe causes the swiper to change;
Other reasons will be represented by an empty string.

Bug & Tip

tip: If you use the change value bindchange in the event callback function , it may cause it to be called continuously. Therefore, usually please check the field before changing the value to determine whether it is caused by user touch.setDatacurrentsetDatacurrentsource
tip: On the mac applet, if the page where the current component is located or the enablePassiveEvent configuration item is turned on globally, the built-in component may behave unexpectedly (for details, refer to the enablePassiveEvent document )

Sample code

<view class="banner" wx:if="{
   
   {bannerItems.length>0}}">
                    <swiper autoplay="true" interval="3000" duration="500" circular="true">
                        <swiper-item wx:for-items="{
   
   {bannerItems}}" data-index="{
   
   {index}}" wx:key="bannerId">
                            <view class="banner-card" catchtap='bannerClick' id="{
   
   {index}}">
                                <image bindtap='statistics' class='banner-img' id="{
   
   {index}}" src="{
   
   {item.imgURL}}"></image>
                                <view class="ad-icon">广告</view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>

PS: In the swiper-item tag, you can customize the data display of the view element according to your own needs.

Banner click monitoring

// banner跳转
bannerClick(e) {
    let _self = this;
    // 根据swiper-item中的data-index="{
   
   {index}}"，取出banner索引
    let index = e.currentTarget.id;
    // 拿到索引，获取banner数据进行跳转等操作
    ...
},