WeChat applet components: slider slide selector

This article mainly describes the small program components: slider sliding selector related information, has a certain reference value, interested friends can refer to the slider sliding selector component description:

Slide selector.

The sample code of the slider sliding selector is as follows:

The following is the WXML code:

   
  
   
Set left/right icon
    
      
     
  
 
   
  
   
Set step
    
      
     
  
 
   
  
   
Show current value
    
      
     
  
 
   
  
   
Set minimum/maximum values
    
      
     
  
 

The following is the JS code:

Var pageData ={} for (var I = 1; I <5; I ++) {(function (index) {pageData ['Slider' + index + 'change'] = function (e) {console. log ('Slider' + 'index' + 'when a change event occurs. the carrying value is', e. detail. value) }}) (I)} Page (pageData)

The following is the WXSS code:

.page {    min-height: 100%;    flex: 1;    background-color: #FBF9FE;    font-size: 32rpx;    overflow: hidden;}

Main properties of the slider selector

Attribute name

Type

Default value

Description

MinNumber0 minimum value
MaxNumber100 maximum
StepNumber1 step, value must be greater than 0, and can be divisible by (max-min)
Whether disabledBooleanfalse is disabled
ValueNumber0 current value
Show-valueBooleanfalse: whether to display the current value
BindchangeEventHandle: event. detail = {value: value} personal experience: min is a negative number.

Slide selector.
Since min and max are of the Number type, can I set min to a negative Number?

The following is the WXML code:

   
  
   
Set minimum/maximum values
    
      
     
  
 

The following is the JS code:

Var pageData ={} for (var I = 1; I <5; I ++) {(function (index) {pageData ['Slider' + index + 'change'] = function (e) {console. log ('Slider' + 'index' + 'when a change event occurs. the carrying value is', e. detail. value) }}) (I)} Page (pageData)

The following is the WXSS code:

.page {    min-height: 100%;    flex: 1;    background-color: #FBF9FE;    font-size: 32rpx;    overflow: hidden;}

Analysis: you can see that min can be set to a negative number, and the default slider is displayed at a position of 0 (indicating that the value attribute controls this ). You can drag it to the left and then display a negative number;

Personal experience: If min is greater than max

I thought an error would be reported, and the result was unexpected. It does not report an error and is displayed at the max position. the slider cannot be dragged. This is an obvious pitfall!

The following is the WXML code:

   
  
   
Set minimum/maximum values
    
      
     
  
 

The following is the JS code:

Var pageData ={} for (var I = 1; I <5; I ++) {(function (index) {pageData ['Slider' + index + 'change'] = function (e) {console. log ('Slider' + 'index' + 'when a change event occurs. the carrying value is', e. detail. value) }}) (I)} Page (pageData)

The following is the WXSS code:

.page {    min-height: 100%;    flex: 1;    background-color: #FBF9FE;    font-size: 32rpx;    overflow: hidden;}

This control will be changed later. Please avoid this trap.
In addition, max can be equal to min.

Personal experience: two slide

I have used slider before. you can set slider to two. I did not write this document. I am also enough. I can only say that it is not mature.

Personal experience: using wx. showToast to display value

The following is the WXML code:

   
  
   
Use toast to display the current value
    
      
     
  
 

The following is the JS code:

Var pageData ={} for (var I = 1; I <5; I ++) {(function (index) {pageData ['Slider' + index + 'change'] = function (e) {console. log ('Slider' + 'index' + 'when a change event occurs. the carrying value is', e. detail. value) wx. showToast ({title: 'You selected' + e. detail. value, icon: 'success', duration: 2000}) }) (I)} Page (pageData)

The following is the WXSS code:

.page {    min-height: 100%;    flex: 1;    background-color: #FBF9FE;    font-size: 32rpx;    overflow: hidden;}

The above is a detailed explanation of the small program component: slider sliding selector details, please pay attention to the first PHP community other related articles!