Nhảy tới nội dung

picker

picker tương tự với picker-view, cho phép người dùng chọn một phần tử trong một mảng dưới dạng scroll, tuy nhiên nó sẽ được hiển thị bên trong popup ở dưới page.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuMô tả
titlestringTitle của picker
rangearray of strings/objectsMảng các phần tử hiển thị trong picker, nếu bạn khai báo một mảng các đối tượng, bạn cần khai báo thêm range-key
confirm-button-textstringNội dung của button dưới footer; mặc định là OK. Chỉ support framework version từ 1.73.5 trở lên
confirm-button-classstringClass của button dưới footer. Chỉ support framework version từ 1.73.5 trở lên
rang-keystringChỉ định key nào trong object sẽ được hiển thị, được dùng khi range là mảng đối tượng
valuestringChỉ định index nào được chọn, bắt đầu từ 0
onChangeeventSự kiện được gọi khi giá trị bị thay đổi, event.detail = { value: value }, trong đó value là index của item được chọn
disabledbooleanNếu giá trị là true, khi bạn bấm vào picker thì sẽ không hiển thị

Sample Code

index.json
{
"defaultTitle": "picker",
"usingComponents": {
"block-header": "components/block-header/index"
}
}
<block-header title="Usage" description="Picker" />

<view>
<view class="block-content">
<view class="component-item">
<picker range="{{array}}" value="{{arrayIndex}}" onChange="onArrayChange">
<view class="picker">
Array: {{arrayIndex}}
</view>
</picker>
</view>
<view class="component-item">
<picker title="Array Object" range="{{objecttArray}}" range-key="name" value="{{objecttArrayIndex}}" onChange="onObjectArrayChange">
<view class="picker">
Array Object: {{objecttArrayIndex}}
</view>
</picker>
</view>
</view>
</view>
/view>
index.js
Page({
data: {
array: Array.from(Array(10).keys()),
objecttArray: Array.from(Array(10).keys()).map((i) => ({
id: i,
name: `Array ${i}`
})),
arrayIndex: 0,
objecttArrayIndex: 0
},
onArrayChange(e) {
console.log('array', e.detail.value);
this.setData({
arrayIndex: e.detail.value
});
},
onObjectArrayChange(e) {
console.log('arrayObject', e.detail.value);
this.setData({
objecttArrayIndex: e.detail.value
});
}
});
index.tcss
.picker {
width: 100%;
}