How to use the picker component in WeChat mini program

This article mainly introduces the simple usage of the WeChat applet picker component. It analyzes the function, usage and related precautions of the picker component in detail in the form of examples. Friends in need can refer to the following

The examples of this article are described Learned the simple usage of WeChat applet picker component. Share it with everyone for your reference, the details are as follows:

picker rolling selector currently supports three selectors, distinguished by mode, which are ordinary selectors (mode=selector), Time selector (mode=time), date selector (mode=date), the default is a normal selector.

The specific function description is as follows:

Ordinary selector: mode=selector

##rangeArray[]When mode is selector, range is validvalueNumber0mode When it is selector, it is a number, indicating which number in the range is selected, starting from 0. bindchangeEventHandleThe change event is triggered when the value changes,

Attribute name	Type	Default value	Description
			event.detail= { value:value }

Time selector: mode=time

Attribute nameTypeDefault valueDescription##valuehh:mm starthh:mm endhh:mm bindchangeevent.detail= { value:value}

String		represents the selected time, the format is "	"
String		represents the beginning of the valid time range, the string format is "	"
String		represents the end of the valid time range, the string format is "	"
EventHandle		The change event is triggered when the value changes,

Date picker: mode=date

Attribute namevalueyyyy-MM-ddstartyyyy-MM-ddendyyyy-MM-ddfieldsbindchangeevent.detail= { value:value}The sample code is as follows:

Type	Default value	Description
String	#0	represents the selected date, The format is "	"
String		represents the valid date The beginning of the range, the string format is "	"
String		represents the end of the valid date range, the string format is "	"
String	day	Valid values ​​are year, month, day, indicating the granularity of the selector
EventHandle		The change event is triggered when the value changes,

picker.wxml：

<view class="section">
 <view class="section__title">地区选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
 <view class="picker">
  当前选择：{{array[index]}}
 </view>
 </picker>
</view>
<view class="section">
 <view class="section__title">时间选择器</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="section__title">日期选择器</view>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
 <view class="picker">
  当前选择: {{date}}
 </view>
 </picker>
</view>

picker.js：

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.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;
}

The above is what I compiled for everyone. I hope it will be useful to you in the future. Everyone is helpful.

Related articles:

How to use the Vue.use() component through the global method

About creating constants in JavaScript (detailed tutorial )

How to close the web page and display the exit prompt in js (detailed tutorial)

In the JavaScript statement, there are issues related to the following semicolon

How to use wx.previewImage to preview images in WeChat applet

The above is the detailed content of How to use the picker component in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!