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

Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/picker/index

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ính	Kiểu dữ liệu	Mô tả
title	string	Title của picker
range	array of strings/objects	Mả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-text	string	Nộ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-class	string	Class của button dưới footer. Chỉ support framework version từ 1.73.5 trở lên
rang-key	string	Chỉ định key nào trong object sẽ được hiển thị, được dùng khi range là mảng đối tượng
value	string	Chỉ định index nào được chọn, bắt đầu từ 0
onChange	event	Sự 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
disabled	boolean	Nế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%;
}