WeChat applet picker-view component detailed example code

This article mainly introduces the detailed explanation and simple examples of the WeChat applet picker-view component. Friends in need can refer to the

implementation renderings:

Scroll selector embedded in the page

Attribute name	Type	Default value	Description
value	Number Array		The numbers in the array represent in turn the numbers in the picker-view The number of items selected by picker-view-colume (the subscript starts from 0). When the number is greater than the length of picker-view-column options, the last item is selected.
indicator-style	String		Set the style of the selected box in the middle of the selector
bindchange	EventHandle		The change event is triggered when the value changes during scroll selection, event.detail = {value: value}; value is an array, indicating The picker-view-column in picker-view is currently selecting the item number (the subscript starts from 0)

Note: Only Place the component, and other nodes will not be displayed.

picker-view-column

can only be placed in , and the height of its child nodes will be automatically set to the same as picker-view The height of the selected box is consistent

Sample code:

 {{year}}年{{month}}月{{day}}日
 
 
 {{item}}年
 
 
 {{item}}月
 
 
 {{item}}日
 
 

const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
 years.push(i)
}

for (let i = 1 ; i <= 12; i++) {
 months.push(i)
}

for (let i = 1 ; i <= 31; i++) {
 days.push(i)
}

Page({
 data: {
 years: years,
 year: date.getFullYear(),
 months: months,
 month: 2,
 days: days,
 day: 2,
 year: date.getFullYear(),
 value: [9999, 1, 1],
 },
 bindChange: function(e) {
 const val = e.detail.value
 this.setData({
 year: this.data.years[val[0]],
 month: this.data.months[val[1]],
 day: this.data.days[val[1]]
 })
 }
})

Thanks for reading, I hope it helps everyone, thank you for your support of this site!

The above is the detailed content of WeChat applet picker-view component detailed example code. For more information, please follow other related articles on the PHP Chinese website!