WeChat applet picker component detailed example code

This article mainly introduces the detailed explanation and simple examples of the WeChat applet picker component. Friends in need can refer to the

implementation renderings:

WeChat applet picker

Scroll selector now supports three selectors, distinguished by mode, which are ordinary selectors and time selectors , Date selector, the default is the ordinary selector

Ordinary 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 which number in the range is selected, starting from 0.
bindchange	EventHandle		The change event is triggered when the value changes, event.detail= { value:value}

Time selector: mode=time

##value represents the selected time, the format is "hh:mm"StringIndicates the beginning of the valid time range, StringIndicates the end of the valid time range, the string format is "hh:mm"EventHandleThe change event is triggered when the value changes, event.detail= { value:value}

Attribute name	Type	Default value	Description
	String
			String The format is "hh:mm"

Date picker: mode=date

Attribute nameTypeDefault valueDescription##valuestartendfieldsbindchange

String	0	represents the selected date in the format of "yyyy-MM-dd"
String		represents the start of the valid date range, the string format is "yyyy-MM-dd"
String		represents the end of the valid date range, the string format is " yyyy-MM-dd"
String	day	Valid values ​​are year, month, day, indicating the selector The granularity
EventHandle		The change event is triggered when the value changes, event.detail= { value:value}

Sample code:

<view class="section">
 <view class="sectiontitle">地区选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
 <view class="picker">
  当前选择：{{array[index]}}
 </view>
 </picker>
</view>
<view class="section">
 <view class="sectiontitle">时间选择器</view>
 <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
 <view class="picker">
  当前选择: {{time}}
 </view>
 </picker>
</view>

<view class="section">
 <view class="sectiontitle">日期选择器</view>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
 <view class="picker">
  当前选择: {{date}}
 </view>
 </picker>
</view>

Page({
 data: {
 array:["美国","中国","巴西","日本"],
 index:0,
 date:"2016-09-01",
 time:"12:01"
 },
 bindPickerChange: function(e) {
 console.log('picker发送选择改变，携带值为', 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.time
 })
 }
})

Thank you for reading, I hope it can help everyone, thank you for your support of this site !

The above is the detailed content of WeChat applet picker component detailed example code. For more information, please follow other related articles on the PHP Chinese website!