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

This article will explain in detail how to use WeChat Mini Programs swiper for you. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Swiper

Slider view container.

The default value of the attribute name type indicates whether the minimum version indicator-dotsBooleanfalse displays the panel indicator point indicator-colorColorrgba (0,0,0,.3) indicating whether the point color 1.1.0indicator-active-colorColor#000000 currently selected indicates whether 1.1.0autoplayBooleanfalse automatically switches the indexintervalNumber5000 of the page where currentNumber0 is currently located, the automatic switching time interval durationNumber500 sliding animation length circularBooleanfalse uses cohesion sliding verticalBooleanfalse whether vertical bindchangeEventHandlecurrent changes will trigger the change event Event.detail = {current: current, source: source}

Starting from the common library v1.4.0, the change event returns detail with a source field indicating 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.

Note: only components can be placed, otherwise it will result in undefined behavior.

Swiper-item

Can only be placed in a component, and the width and height are automatically set to 100%.

Sample code:

Indicator-dots autoplay interval durationPage ({data: {imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',' http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'], 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})}) this is the end of the article on "how to use WeChat Mini Programs's swiper" Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

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.