Pagination slide bar of WeChat applet Template

This article describes in detail the paging slide of a small program template, which has some reference value, interested friends can refer to the examples in this article to share with you the specific code of the applet paging slide bar for your reference. The details are as follows:

Function:

1. bind the pagination bar to the sliding view
2. click the tab bar to automatically slide to the corresponding view.
3. the selected style is automatically displayed in the corresponding tab bar of the view.

Wxml

  
  
   
Paging tag 1
   
  
   
Paging tag 2
   
  
   
Paging tag 3
  
 
  
   
     
     
    
  
 

Wxss

/* 1. horizontally arrange paging labels 2. each page tag accounts for 1/3 */. tapNav {display: flex; flex-direction: row ;}. tapNav view {flex: 1; width: 200rpx; height: 100rpx; text-align: center; line-height: 100rpx; font-family: "";} /* Selected style */. tapNav. active {color: blue; border-bottom: 4rpx solid mediumseagreen;} # swiper {margin-top: 40rpx;} # swiper image {width: 100% ;}

Js

// Index. js // Obtain the application instance var app = getApp () Page ({data: {// Image address 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 '], // Whether to display the panel indicator point indicatorDots: true, // automatic playback autoplay: true, // switching interval: 2000, // sliding duration: 1000, // store the current: 0 of the sliding View. // The value of tabArr: {tabCurrentIndex: 0} judged by the class condition of the paging label }}, // Event Processing function // trigger event veHandle: function (e) by touching the paging tag {// data-index is set for each paging tag, touch trigger event to get this value // use this value to replace the current value of the sliding View // use this value to replace the value of lele.log(e.tar get. dataset. index) var currentIndex = e.tar get. dataset. index this. setData ({current: currentIndex, "tabArr. tabCurrentIndex ": currentIndex})}, // trigger the event swiperChange: function (e) by changing the current value of the slider view) {// Obtain the current value of the view slider // use this value to replace the current value of the tab page. console. log (e. detail. current) var swiperCurrent = e. detail. current; this. setData ({'tabarr. tabcurrentindex': swiperCurrent})}, onLoad: function () {console. log ('onload ')}})

The above is all the content of this article. I hope it will help you learn and support PHP.

For more articles about the paging slide bar of small program templates, refer to PHP Chinese website!