picker-view
picker-view
hiển thị một vùng chọn dạng scroll trong page. Các thành phần con bên trong picker-view
cần được bọc bởi thẻ picker-view-column
. Giá trị của picker-view
được thiết lập hoặc lấy từ index
của các phần tử trong mảng
Quét mã để trải nghiệm
Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/picker-view/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/picker-view/index
Demo
Trải nghiệm thử với trình giả lập bên dưới
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Mô tả |
---|---|---|
value | number array | Chỉ định giá trị được chọn trong các picker-view-column (bắt đầu từ 0), số lượng phần tử trong mảng nên trùng với số picker-view-column đang hiển thị. Ví dụ bản có 2 picker-view-column trong picker-view , bạn muốn ở picker-view-column đầu tiên chọn index thứ 1, ở picker-view-column thứ 2 chọn index đầu tiên, bạn khai báo value="{{[1, 0]}}" .Nếu bạn không khai báo thì mặc định sẽ là index đầu tiên được chọn |
indicator-style | string | Inline style cho indicator, là phần nằm giữa chỗ index đang được chọn |
indicator-class | string | Class name cho indicator |
mask-style | string | Inline style cho mask |
mask-class | string | Class name cho mask |
onChange | event | Sự kiện được gọi khi giá trị bị thay đổi, event.detail = { value: value } , trong đó value là mảng các index đang được chọn trong picker-column |
Sample Code
index.json
{
"defaultTitle": "picker-view",
"usingComponents": {
"block-header": "components/block-header/index"
}
}
index.txml
<block-header title="Usage" description="Picker" />
<view>
<view class="block-content">
<picker-view
value="{{value}}"
onChange="onChange">
<picker-view-column>
<view>Tháng 1</view>
<view>Tháng 2</view>
<view>Tháng 3</view>
<view>Tháng 4</view>
<view>Tháng 5</view>
<view>Tháng 6</view>
<view>Tháng 7</view>
<view>Tháng 8</view>
<view>Tháng 9</view>
<view>Tháng 10</view>
<view>Tháng 11</view>
<view>Tháng 12</view>
</picker-view-column>
<picker-view-column>
<view>Năm 2021</view>
<view>Năm 2022</view>
<view>Năm 2023</view>
<view>Năm 2024</view>
</picker-view-column>
</picker-view>
</view>
</view>
index.js
Page({
data: {},
onChange(e) {
console.log(e.detail.value);
this.setData({
value: e.detail.value
});
}
});