WeChat Open Platform

Mini Programs Documentation


An embedded page scroll selector

Attribute name Type Description Minimum version
value NumberArray The order of the numbers in the array indicates the ordinal item selected in the picker-view-column in picker-view (subscript starts from 0). If the number is greater than the length of the selectable items in the picker-view-column, the last item is selected.
indicator-style String Sets style for check box in middle of selector
indicator-class String Sets class name for check box in middle of selector
bindchange EventHandle When scrolling selection, a change event triggered when the value changes, event.detail = {value: value}; value is an array, indicates the ordinal item currently selected in the picker-view-column in picker-view (subscript starts from 0)  

Note: Of these, only the <picker-view-column/> component can be placed. Other nodes will not be displayed.


Can only be placed in <picker-view />. The height of its child nodes will automatically be set to the same height as the picker-view check box.

Sample code:

  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
      <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
const date = new Date()
const years = []
const months = []
const days = []

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

for (let i = 1 ; i <= 12; i++) {

for (let i = 1 ; i <= 31; i++) {

  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
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]