Simple usage of picker component in WeChat applet

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

Running effect:

The above is the entire content of this article, I hope It will be helpful for everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the use of WeChat applet button component

WeChat applet implements dynamic setting of placeholder prompt text And the method of button selection/cancel state

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