Detailed explanation of WeChat applet selector (time, date, region) examples

This article mainly introduces the relevant information on the detailed explanation of the WeChat applet selector (time, date, region) example. The example code and implementation renderings are provided here to help everyone learn and understand this part of knowledge. Friends in need can refer to it. Next

WeChat applet selector (time, date, region)

WeChat applet development Since I have recently learned the development of WeChat applet, based on my own practical results I have sorted out the results and found some examples of date selector, time selector, and region selector. If there are any mistakes, I hope you can correct them.

It feels good to use the controls packaged in WeChat envelopes, which saves us developers a lot of trouble. The disadvantage is that we cannot do a lot of customization. I tried the selector today.

Upload gif:

Upload code:

1.index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  date: '2016-11-08', 
  time: '12:00', 
  array: ['中国', '巴西', '日本', '美国'], 
  index: 0, 
 }, 
 
 onLoad: function () { 
 
 }, 
 // 点击时间组件确定事件 
 bindTimeChange: function (e) { 
  this.setData({ 
   time: e.detail.value 
  }) 
 }, 
 // 点击日期组件确定事件 
 bindDateChange: function (e) { 
  this.setData({ 
   date: e.detail.value 
  }) 
 }, 
 // 点击国家组件确定事件 
 bindPickerChange: function (e) { 
  this.setData({ 
   index: e.detail.value 
  }) 
 } 
}) 

2.index.wxml
[html] view plain copy
<!--index.wxml--> 
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> 
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> 
  <view class="picker"> 
   国家：{{array[index]}} 
  </view> 
 </picker> 
</view> 
 
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> 
 <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> 
  <view class="picker"> 
   时间 : {{time}} 
  </view> 
 </picker> 
</view> 
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> 
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> 
  <view class="picker"> 
   日期: {{date}} 
  </view> 
 </picker> 
</view>

①Ordinary selector

The selector is distinguished by mode. The default is the ordinary selector. Take e.detail.value The obtained value is the index index of the selected item, and then the value is obtained through the array. When initializing the data, just add the alternative item to the array.

The bindPickerChange event is triggered when selecting, and get index.

②Time selector

When mode = time, it is the time selector. start and end are the start and end of the valid time range respectively. Format hh:mm
triggers the bindTimeChange event when selecting, and gets the time.

③Date selector

mode = date, it is the time selector .start and end are the start and end of the valid date range respectively. The format yyyy-MM-dd
triggers the bindDateChange event when selected, and obtains the date

The above is the detailed content of Detailed explanation of WeChat applet selector (time, date, region) examples. For more information, please follow other related articles on the PHP Chinese website!