WeChat applet picker scroll selector use detailed explanation

Basic use of picker

The picker scroll selector (hereinafter referred to as picker) is a component that comes with the WeChat applet. It does not need to introduce any files. Just put the picker code in the appropriate position and click the scroll selector that can pop up from the bottom.

Easiest to use

Of course I have no data defined, so there is no content in the selector.

picker assignment

How to assign a value to the scroll selector above?Use range to add selections to the scroll selector.

range assignment

Of course, data can also be bound, but it should be noted that the data can only be an array in the format of ["1","2","3"].

Multi-column picker selector

The scroll selector above has only one column. Sometimes we need two or more columns. How to use it?

Use mode = multiSelector to define it as a multi-column selector.If not set, it defaults to a normal selector, and others:

Time picker: mode = time

Date picker: mode=date

Province and city selector: mode = region, here is a multi-column selector.

Multi-column scroll selector

After setting it as a multi-column selector, you need to specify several columns through the data. If you also use the above test data, we can see that there are three columns in the selector. The reason is that there are three groups of test data, that is, throughThe length of the array determines how many columns of selectors there are.

If we need to do two columns, the data will be divided into two groups, and the data in each group will be the data of the column.As shown:

Simply put, multi-column picker is to control several columns and column data through range data.If you want to make three columns, make three sets of data, and four columns make four sets of data...

data: {

test: [

["The first in the first column", "The second in the first column", "The third in the first column"],//The first column of data

["The first in the second column","The second in the second column"],//The second column of data

["Third column"],

["The fourth column"]//If you need to do a few columns, do a few sets of data

]

},

picker event listener

After the picker scroll selector is made, its operation events should be monitored. There are two main operation events, bindchange (change value event, understood as pointIt can be triggered after confirming the button) and bindcolumnchange (list change event, understood as a sliding trigger event, this event is only valid in multi-column selectors), here ITest these two events using a multi-column selector as an example:

bindchange event: When the event is executed after clicking OK, you can find the output value of each column through the console outputWhich column is selected.The e.detail.value value is the row selected for each column.I have selected the first row here so the value is [0,0,0,0].

bindcolumnchange event: When we slide a column of data in the selector, this event will be triggered.Viewing in Taichung, it will show which column has been swiped and which column has been swiped to.

Here I changed the console output event, and you can see it more carefully through the animation below.

Define the selection of the sliding selector

Sometimes we need to make a default selection for the scroll selector. At this time, the selection state of each column can be set by value.As in the above four columns, if I want to set the second value by default, I can set [1,1,1,1] for the value.

Summary: Through the above introduction, we can understand that configuring picker is mainly to configure its content, default value, and two events.However, it should be noted that the value of picker is not the value we need in practical applications, so we often need to make another data to correspond to this side.