WeChat small program Picker component simple usage example [attached Demo source download]

This example describes the simple usage of WeChat applet Picker components. Share to everyone for your reference, specifically:

Picker scroll selector, now support three selectors, distinguishes by Mode, is a normal selector (Mode = selector), time selector (Mode = Time), the date selector (Mode = DATE), the default is a normal selector.

The specific function is as follows:

Normal selector: mode = selector

attribute name RANGE Value Event.detail = {Value: Value } Attribute Name
Default value Description
Array [] When Selector, RANGE is valid
Number 0 Mode is a number, indicating that the first average in Range is selected, starting from 0. EventHANDLE
Trigge the Change event when Value changes, Time Selector: Mode = TIME


Value String is shown Time, format is “hh: mm” START String shows the start and character of the effective time range The string format is “HH: mm” shows the end of the effective time range, the string format To “HH: mm” Event. Detail = {Value: Value} Type Description Value String “YYYY-MM-DD”
VALUE triggers the Change event when changing, Date Selector: Mode = Date


The start of the effective date range, the string format is “YYYY-MM-DD” The end of the effective date range, the string format is “YYYY-MM-DD” The sample code is as follows: Select: {{array [index]} Current selection: {{TIME}}
end String
Fields String True value Year, Month, Day, represents the granularity of the selector
Bindchange EventHandle event.detail = {Value: value}
Area selector
Current selection: {{DATE}}


Page ({data: {Array: [‘US’, ‘China “,’ Brazil ‘,’ Japan ‘], Index : 0, Date: ‘2016-09-01’, Time: ’12: 01 ‘}, BindPickerChange: Function (E) {Console.log (‘ Picker Selection Change, Carry value ‘, E.DETAIL.VALUE) This.SetData ({index: e.detail.value})}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}: function ({date: e.detail.value})}}}}}}}}}}} {TIME: E.Detail.Value})}}}}})
  Simple style layout Picker.wxss:   .SECTION {Display: Flex; flex-direction: column; padding: 20rpx 0rpx; color: # 333;}. Section__title {font-size: 40rpx; margin: 10RPX 0RPX; }         Addition:  Demo Source Click here  This site downloads .   I hope this article will help the WeChat applet development.                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment