Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this "swiper Mini Program development sample analysis" article, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "swiper Mini Program development sample analysis" article.

Swiper Chinese documents

The basic library 1.0.0 is supported, and the lower version needs to be compatible.

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

Attribute type default value is required to indicate the minimum version

Does indicator-dotsbooleanfalse display panel indicator point 1.0.0?

Indicator-colorcolorrgba (0,0,0,.3) No indication point color 1.1.0

Indicator-active-colorcolor#000000 No currently selected indicator point color 1.1.0

Does autoplaybooleanfalse automatically switch 1.0.0?

Currentnumber0 No index1.0.0 of the slider where it is currently located

Intervalnumber5000 No automatic switching interval 1.0.0

Durationnumber500 No Slide Animation duration 1.0.0

Does circularbooleanfalse adopt cohesive sliding 1.0.0?

Whether verticalbooleanfalse No sliding Direction is Longitudinal 1.0.0

Previous-marginstring "0px" negative leading margin, can be used to expose a small portion of the previous item, accepting px and rpx values of 1.9.0

Next-marginstring "0px" No margin, can be used to expose a small part of the latter, accept px and rpx values of 1.9.0

Snap-to-edgeboolean "false" whether when the number of swiper-item is greater than or equal to 2, close circular and turn on previous-margin or next-margin, you can specify whether this margin is applied to the first and last element 2.12.1.

Display-multiple-itemsnumber1 No number of sliders displayed at the same time 1.9.0

Does easing-functionstring "default" specify swiper toggle ease animation type 2.6.5

Bindchangeeventhandle No change event will be triggered when current changes, event.detail = {current, source} 1.0.0

Bindtransitioneventhandle No transition event will be triggered when the location of swiper-item changes, event.detail = {dx: dx, dy: dy} 2.4.3

The animationfinish event will be triggered at the end of bindanimationfinisheventhandle animation. Event.detail is the same as 1.9.0 above.

Legal value of easing-function

Value indicates the minimum version

Default default ease function

Linear animation

EaseInCubic ease into animation

EaseOutCubic ease out of animation

EaseInOutCubic ease in and ease out animation

Change event source return value

Starting from 1.4.0, the change event adds a source field to indicate the cause of the change. Possible values are as follows:

Autoplay auto playback causes swiper change

Swiper changes caused by touch user strokes

Other reasons will be represented by an empty string.

Bug & Tip

Tip: if you use setData in the event callback function of bindchange to change the current value, it is possible to cause setData to be called incessantly, so usually check the source field before changing the current value to determine whether it is caused by user touch.

Page ({

OnShareAppMessage () {

Return {

Title: 'swiper'

Path: 'page/component/pages/swiper/swiper'

}

}

Data: {

Background: ['demo-text-1',' demo-text-2', 'demo-text-3']

IndicatorDots: true

Vertical: false

Autoplay: false

Interval: 2000

Duration: 500

}

ChangeIndicatorDots () {

This.setData ({

IndicatorDots:! this.data.indicatorDots

})

}

ChangeAutoplay () {

This.setData ({

Autoplay:! this.data.autoplay

})

}

IntervalChange (e) {

This.setData ({

Interval: e.detail.value

})

}

DurationChange (e) {

This.setData ({

Duration: e.detail.value

})

}

})

The above is about the content of this article "sample Analysis of swiper Mini Program Development". I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.