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 <picker-view-column></picker-view-column> component, and other nodes will not be displayed.

picker-view-column

can only be placed in <picker-view></picker-view>, 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:

<view>
 <view>{{year}}年{{month}}月{{day}}日</view>
 <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
 <picker-view-column>
 <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
 </picker-view-column>
 </picker-view>
</view>

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!