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

This article "WeChat Mini Programs slider view container swiper how to use" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "WeChat Mini Programs slider view container swiper how to use" article.

1. TabBar at the bottom

The properties that can be set are color, selectedColor, borderStyle, backgroundColor, list at least 2 and up to 5 (such as pagePath, text, iconPath, selectedIconPath, etc.)

"tabBar": {"color": "# dddddd", "selectedColor": "# 3cc51f", "borderStyle": "black", "backgroundColor": "# 2B2B2B", "list": [{"pagePath": "pages/movie/movie", "text": "cinema hits", "iconPath": "assets/img/dy-1.png" "selectedIconPath": "assets/img/dy.png"}, {"pagePath": "pages/recommend/recommend", "text": "movie recommendation", "iconPath": "assets/img/tj-1.png", "selectedIconPath": "assets/img/tj.png"}, {"pagePath": "pages/search/search" "text": "query movie", "iconPath": "assets/img/search-1.png", "selectedIconPath": "assets/img/search.png"}]}

2. Slider View Container swiper

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:

Swiper-item > block > swiper > indicator-dots button > autoplay button > 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})}}) these are the contents of the article entitled "how to use WeChat Mini Programs's slider view container swiper" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to 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.