Represents a scrollable picker embedded in the page.
Since: 1.0.0
This component can only host the picker-view-column component. Otherwise, other nodes are not displayed.
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
value | Array<number> | No | Array of indices for the selected items in each picker-view-column. The indices are zero-based. If a value exceeds the total number of items in its column, the last item is selected. | |
indicator-style | string | No | Style of the middle checkbox of the picker. | |
bindchange | eventhandle | No | Event handler triggered when the selection changes via scrolling, with event.detail = {value} (where value is an array of indices (zero-based) indicating the currently selected items in each picker-view-column). | |
bindpickstart | eventhandle | No | Event handler triggered when the scrolling selection starts. | |
bindpickend | eventhandle | No | Event handler triggered when the scrolling selection ends. |
HXML file:
<view class="container">
<template is="head" data="{{title: 'picker-view'}}"/>
<view class="page-body">
<view class="selected-date">{{year}}Year{{month}}Month{{day}}Day{{isDaytime ? "Daytime" : "Night"}}</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view has:for="{{years}}" has:key="{{years}}" style="line-height: 50px; text-align: center;">{{item}}Year</view>
</picker-view-column>
<picker-view-column>
<view has:for="{{months}}" has:key="{{months}}" style="line-height: 50px; text-align: center;">{{item}}Month</view>
</picker-view-column>
<picker-view-column>
<view has:for="{{days}}" has:key="{{days}}" style="line-height: 50px; text-align: center;">{{item}}Day</view>
</picker-view-column>
<picker-view-column>
<view class="icon-container">
<image class="picker-icon" src="../lib/daytime.png" />
</view>
<view class="icon-container">
<image class="picker-icon" src="../lib/night.png" />
</view>
</picker-view-column>
</picker-view>
</view>
<template is="foot"/>
</view> JS file:
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,
year: date.getFullYear(),
months,
month: 2,
days,
day: 2,
value: [9999, 1, 1],
isDaytime: true,
},
bindChange(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[2]],
isDaytime: !val[3]
})
}
})