Detailed description of the WeChat applet scroll selector (time and date) and instance code, Applet Selector

Detailed description of the applet scroll selector (time and date) and instance code, Applet Selector

Detailed description of the applet scroll selector (time and date)

The applet encapsulates a lot of controls and is very convenient to use. If this is in Android, You need to define the controls by yourself ,:

Let's take a look at how it works? You should just say, Nima, that's all ....

The picker component is used for this effect. The scroll selector that pops up from the bottom of the animation. Three pickers are supported, which are distinguished by mode: Common selector, time selector, and date selector, the default value is normal selector.

Check the corresponding attributes:

For details, refer to the code and layout:

<View class = "section"> <picker bindchange = "bindPickerChange" value = "{index}" range = "{objectArray}" mode = "selector"> <view class = "picker"> country: {objectArray [index] }}</view> </picker> </view> <view class = "section"> <picker mode = "time" value = "{{ time }}" start = "00:00" end = "23:59" bindchange = "bindTimeChange"> <view class = "picker"> time: {times }}</view> </picker> </view> <view class = "section"> <picker mode = "date" value = "{date }} "start =" 1978-01-01 "end =" 2017-1-23 "bindchange =" bindDateChange "> <view class =" picker "> date: {dates }}</view> </picker> </view>

Css style:

.section{  background:#CABBC7;  margin:20rpx;  padding:20rpx}

Js Code:

Page ({data: {dates: '2017-11-08 ', times: '12: 00', objectArray: ['China', 'British', 'u.s. '], index: 0 ,}, // click the time component to determine the event bindTimeChange: function (e) {console. log ("Who do press") this. setData ({times: e. detail. value})}, // click the date component to determine the event bindDateChange: function (e) {console. log (e. detail. value) this. setData ({dates: e. detail. value})}, // click the city component to confirm the event bindPickerChange: function (e) {console. log (e. detail. value) this. setData ({index: e. detail. value })}

The code is very simple. Bind events separately and click switch.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!