WeChat applet component: picker scroll selector

Picker scroll selector Component Description: picker: scroll selector. Currently, three selectors are supported. They are distinguished by the mode attribute, namely, the modeselector and the modetime ), the date selector (modedate), which is a common selector by default. Picker scroll selector component description:

Picker:

The scroll selector. three selectors are supported, which are distinguished by the mode attribute,

They are normal selector (mode = selector), time selector (mode = time), date selector (mode = date ),

The default value is normal selector.

The running effect of the picker scroll selector sample code is as follows:

The following is the WXML code.

   
      
   
    
Picker
       
   
    
Selector
     
    
      
         
    
     
Region Selector
          
            
     
      
Current selection: {array [index]}
           
        
       
         
    
     
Time selector
          
            
     
      
Current selection: {time }}
           
        
       
         
    
     
Date selector
          
            
     
      
Current selection: {date }}
           
        
     
  
 

Below is the JS code

Page ({data: {array: ['China', 'America ', 'Brazil', 'Japan '], index: 0, date: '2017-09-01', time: '12: 01'}, bindPickerChange: function (e) {console. log ('picker transmission selection changed, carrying value ', e. detail. value) this. setData ({index: e. detail. value})}, bindDateChange: function (e) {this. setData ({date: e. detail. value})}, bindTimeChange: function (e) {this. setData ({time: e. detail. value })}})

The following is the WXSS code

.page {    min-height: 100%;    flex: 1;    background-color: #FBF9FE;    font-size: 32rpx;    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;    overflow: hidden;}.page__hd{    padding: 50rpx 50rpx 100rpx 50rpx;    text-align: center;}.page__title{    display: inline-block;    padding: 20rpx 40rpx;    font-size: 32rpx;    color: #AAAAAA;    border-bottom: 1px solid #CCCCCC;}.page__desc{    display: none;    margin-top: 20rpx;    font-size: 26rpx;    color: #BBBBBB;}.picker{  padding: 26rpx;  background-color: #FFFFFF;}.section{    margin-bottom: 80rpx;}.section__title{    margin-bottom: 16rpx;    padding-left: 30rpx;    padding-right: 30rpx;}

Main Attributes of the picker scroll selector:

Normal selector: (mode = selector)

Attribute name	Type	Default value	Description
Range	Array	[]	When mode is selector, range is valid.
Value	Number	0	When mode is selector, it is a number, indicating that the number in the range is selected, starting from 0.
Bindchange	EventHandle		Event. detail = {value: value}

Time selector: (mode = time)

Attribute name	Type	Default value	Description
Value	String		Indicates the selected time, in the format of "hh: mm"
Start	String		Start of the valid time range. the string format is "hh: mm"
End	String		End of the valid time range. the string format is "hh: mm"
Bindchange	EventHandle		Event. detail = {value: value}

Date selector: (mode = date)

Attribute name	Type	Default value	Description
Value	String	0	Represents the selected date in the format of YYYY-MM-DD"
Start	String		Represents the start of the valid date range, in the string format "YYYY-MM-DD"
End	String		Represents the end of the valid date range, in the string format "YYYY-MM-DD"
Fields	String	Day	Valid values: year, month, and day, indicating the granularity of the selector.
Bindchange	EventHandle		Event. detail = {value: value}

The above is a detailed description of the mini-program component: picker scroll selector details, please pay attention to other articles in the first PHP community!