1. ダイアログ ボックス セレクターの <picker> タグ:
プロパティの説明:
header-text：选择器标题(限Android)
mode：选择器类型，值：selector(普通选择器)、multiSelector(多列选择器)、time(时间选择器)、date(日期选择器)、region(省市区选择器)
disabled：是否禁用
range(限mode=selector/multiSelector)：选择器可选列表
range-key：选择器当前选择的key
value：选择器当前选择的value，多列时是数组
start(限mode=time/date)：开始时间，格式：hh:mm、YYYY-MM-DD
end(限mode=time/date)：结束时间，格式：hh:mm、YYYY-MM-DD
fields(限mode=date)：date选择器的粒度，值：year(年)、month(月)、day(天)
custom-item(限mode=region)：每列顶部自定义的项
level：province(省选择器)、city(市选择器)、region(区选择器)、sub-district(街道选择器)
bindcancel：取消选择时触发的方法
bindchange：选择器value改变时触发的方法，通过event.detail.value获值
bindcolumnchange：列改变时触发的方法(限mode=multiSelecto)1. 通常のセレクター:
(1). セレクターは .wxml に表示されます。
<picker mode="selector" bindchange="onPickerChange" value="{
{selectorData[0]}}" range="{
{selectorData}}">
点击弹出普通选择器
</picker>(2).js で選択イベントをリッスンします。
Page({
data: {
selectorData: ['0行', '1行', '2行'], //普通选择器数据
},
onPickerChange(e){ //选择器值改变时触发
console.log("onPickerChange 选择器事件 当前行value: " + e.detail.value);
}
})2. 複数列セレクター:
(1). セレクターは .wxml に表示されます。
<picker mode="multiSelector" bindchange="onPickerChange" bindcolumnchange="onMultiPickerChange" value="{
{multiSelectorData[0]}}" range="{
{multiSelectorData}}">
点击弹出多列选择器
</picker>(2).js で選択イベントをリッスンします。
Page({
data: {
multiSelectorData: [['0列0行', '0列1行'], ['1列0行', '1列1行']], //多列选择器数据
},
onMultiPickerChange(e){ //多列选择器滚动时触发
console.log('onMultiPickerChange 当前列column: ', e.detail.column, ' 当前行value: ', e.detail.value);
},
...
})3. タイムピッカー:
(1). セレクターは .wxml に表示されます。
<picker mode="time" bindchange="onPickerChange" value="{
{timeSelectorData}}" start="00:00" end="23:59">
点击弹出时间选择器
</picker>(2).js で選択イベントをリッスンします。
Page({
data: {
timeSelectorData: '08:30', //时间选择器数据
},
onPickerChange(e){ //选择器值改变时触发
console.log("onPickerChange 选择器事件 当前行value: " + e.detail.value);
}
})4. 日付ピッカー:
(1). セレクターは .wxml に表示されます。
<picker mode="date" bindchange="onPickerChange" value="{
{dateSelectorData}}" start="1977-01-01" end="2022-11-30">
点击弹出日期选择器
</picker>(2).js で選択イベントをリッスンします。
Page({
data: {
dateSelectorData: '2020-04-08', //时间选择器数据
},
onPickerChange(e){ //选择器值改变时触发
console.log("onPickerChange 选择器事件 当前行value: " + e.detail.value);
}
})5. 州、都市セレクター:
(1). セレクターは .wxml に表示されます。
<picker mode="region" bindchange="onPickerChange" value="{
{adressSelectorData}}">
点击弹出省市区选择器
</picker>(2).js で選択イベントをリッスンします。
Page({
data: {
adressSelectorData: ['北京市', '北京市', '海淀区'], //省市区选择器数据
},
onPickerChange(e){ //选择器值改变时触发
console.log("onPickerChange 选择器事件 当前行value: " + e.detail.value);
}
})2. ページセレクターの <picker-view> タグ:
プロパティの説明:
value：当前列当前行选择的索引值
indicator-style：选择器选中框样式代码
indicator-class：选择器选中框样式类
mask-class：蒙层样式类
immediate-change：是否在手指松开时立即触发change事件
bindchange：选择器value改变时触发的方法，通过event.detail.value获值(当前列当前行索引，例[0, 0, 0])
bindpickstart：选择器开始滚动时触发
bindpickend：选择器结束滚动时触发1. .wxml でセレクターを表示します。
<picker-view class="picker_view_class" indicator-style="height: 50px;" value="{
{[2022, 11, 30]}}" bindchange="onPpickerViewChange">
<picker-view-column>
<view wx:for="{
{yearData}}" wx:key="{
{yearData}}" class="picker_view_item_class">{
{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{
{monthData}}" wx:key="{
{monthData}}" class="picker_view_item_class">{
{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{
{dayData}}" wx:key="{
{dayData}}" class="picker_view_item_class">{
{item}}日</view>
</picker-view-column>
</picker-view>2. データを初期化し、.js で選択イベントをリッスンします。
const yearData = [] //年数据列表
const monthData = [] //月数据列表
const dayData = [] //日数据列表
var maxYear = new Date().getFullYear()
for (var i = 1977; i <= maxYear; i++) { //初始化年数据列表
yearData.push(i)
}
for (var i = 1; i <= 12; i++) { //初始化月数据列表
monthData.push(i)
}
for (var i = 1; i <= 30; i++) { //初始化日数据列表，此处没处理28或31天的情况
dayData.push(i)
}
...
Page({
data: {
yearData: yearData, //年数据
monthData: monthData, //月数据
dayData: dayData, //日数据
},
onPickerViewChange(e){ //<picker-view>选择器滚动事件
console.log('onPpickerViewChange 当前value: ', e.detail.value);
}
})3. .wxss でセレクター スタイルを定義します。
.picker_view_class {
width: 100%;
height: 300px;
}
.picker_view_item_class {
line-height: 50px;
text-align: center;
}