Explanation and analysis of WeChat mini-app components: 3. swiper slider view

Interpretation and analysis of Applet components: 3. swiper slider view, Swiper slider Component Description:

• Slider view container, used to display images. you can control Image switching by dragging and setting automatic switching properties.

The following is the WXML code:

[XML]View plain text Copy code

[/align]
   
      
         
        
     
  
  indicator-dots  autoplay 
  interval
  duration

The following is the JS code:

[JavaScript]View plain text Copy code

page({  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    })  }})

[CSS]View plain text Copy code

.swiper-item{    display: block;    height: 150px;}

Main Attributes:

• Set the content style of the interface for wxml
  

Attribute	Type	Default value	Description
Indicator-dots	Boolean	False	Whether to display panel indicator points
Autoplay	Boolean	False	Automatic switch?
Current	Number	0	Index of the current page
Interval	Number	5000	Automatic switch interval
Duration	Number	1000	Sliding animation duration
Bindchange	EventHandle		The change event is triggered when current changes, event. detail = {current: current}

The above is the explanation and analysis of the applet components: 3. details of the swiper slider view. For more information, see other related articles in the first PHP community!