Nhảy tới nội dung

my.optionsSelect

optionsSelect

my.optionsSelect là API dùng để tạo component Select. Bạn có thể tạo component Select 1 cấp hoặc 2 cấp.

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

API Params

Thuộc tínhKiểu dữ liệuBắt buộcMô tả
titleStringTitle của Option Selector
optionsOneArray of objectsDanh sách tùy chọn.
optionsTwoArray of objectsDanh sách tùy chọn thứ 2.
selectedOneIndexnumberTùy chọn thứ nhất được chọn theo mặc định. Giá trị mặc định là 0.
selectedTwoIndexnumberTùy chọn thứ 2 được chọn theo mặc định. Giá trị mặc định là 0.
positiveStringStringText của button bên phải. Mặc định là Xác nhận.
negativeStringStringText của button bên trái. Mặc định là Hủy.
successFunctionCallback function khi chọn thành công.
failFunctionCallback function khi việc thay đổi bất thành.
completeFunctionCallback function khi gọi API hoàn tất bất kể thành công hay thất bại.

Giá trị trong success callback

Thuộc tínhKiểu dữ liệuMô tả
selectedOneIndexnumberGiá trị được chọn cho tùy chọn một. Nếu bạn chọn hủy, một chuỗi trống sẽ được trả về.
selectedOneOptionstringNội dung được chọn trong tùy chọn một. Nếu bạn chọn hủy, một chuỗi trống sẽ được trả về.
selectedTwoIndexnumberGiá trị được chọn cho tùy chọn hai. Nếu bạn chọn hủy, một chuỗi trống sẽ được trả về.
selectedTwoOptionstringNội dung được chọn trong tùy chọn hai. Nếu bạn chọn hủy, một chuỗi trống sẽ được trả về.

Sample Code

index.txml
<view>
<block-header title="Usage" description="my.optionsSelect" />
<view class="block-content">
<button class="button-full" onTap="openOne">Single column selector</button>
<button class="button-full" onTap="openTwo">Double column selector</button>
</view>
</view>
index.js
Page({
openOne() {
my.optionsSelect({
title: 'Repayment Date Selection',
optionsOne: [
'Every Monday',
'Every Tuesday',
'Wednesday',
'Every Thursday',
'Every Friday',
'Every Saturday',
'Every Sunday'
],
selectedOneIndex: 2,
positiveString: 'Xác nhận',
negativeString: 'Hủy',
success: (res) => {
my.alert({
title: JSON.stringify(res)
});
},
fail: () => {
console.log('Fail');
}
});
},

openTwo() {
my.optionsSelect({
title: 'Repayment Date Selection',
optionsOne: [
'Every Monday',
'Every Tuesday',
'Wednesday',
'Every Thursday',
'Every Friday',
'Every Saturday',
'Every Sunday'
],
optionsTwo: [
'Every Week',
'Every Month',
'Every Quarter',
'Every Year'
],
selectedOneIndex: 2,
selectedTwoIndex: 2,
positiveString: 'Xác nhận',
negativeString: 'Hủy',
success: (res) => {
my.alert({
title: JSON.stringify(res)
});
},
fail: () => {
console.log('Fail');
}
});
}
});