全部产品
云市场

选项选择器

更新时间:2019-12-02 20:05:05

my.optionsSelect

类似于 safari 原生 select 的组件,但是功能更加强大,一般用来替代 select,或者 2 级数据的选择。注意不支持 2 级数据之间的联动。

效果示例

options select

代码示例

  1. // API-DEMO page/API/options-select/options-select.json
  2. {
  3. "defaultTitle": "选项选择器"
  4. }
  1. <!-- API-DEMO page/API/options-select/options-select.axml-->
  2. <view class="page">
  3. <view class="page-description">选项选择器 API</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.optionsSelect</view>
  6. <view class="page-section-demo">
  7. <button type="primary" onTap="openOne">单列选择器</button>
  8. </view>
  9. <view class="page-section-demo">
  10. <button type="primary" onTap="openTwo">双列选择器</button>
  11. </view>
  12. </view>
  13. </view>
  1. // API-DEMO page/API/options-select/options-select.js
  2. Page({
  3. openOne() {
  4. my.optionsSelect({
  5. title: "还款日选择",
  6. optionsOne: ["每周一", "每周二", "每周三", "每周四", "每周五", "每周六", "每周日"],
  7. selectedOneIndex: 2,
  8. success(res) {
  9. my.alert({
  10. content: JSON.stringify(res, null, 2),
  11. });
  12. }
  13. });
  14. },
  15. openTwo() {
  16. my.optionsSelect({
  17. title: "出生年月选择",
  18. optionsOne: ["2014年", "2013年", "2012年", "2011年", "2010年", "2009年", "2008年"],
  19. optionsTwo: ["一月", '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  20. selectedOneIndex: 3,
  21. selectedTwoIndex: 5,
  22. success(res) {
  23. my.alert({
  24. content: JSON.stringify(res, null, 2),
  25. });
  26. }
  27. });
  28. },
  29. });

入参

入参为 Object 类型,属性如下:

名称 类型 描述 必填 默认值
title string 头部标题信息
optionsOne string[] 选项一列表
optionsTwo string[] 选项二列表
selectedOneIndex number 选项一默认选中 0
selectedTwoIndex number 选项二默认选中 0
positiveString string 确定按钮文案 确定
negativeString string 取消按钮文档 取消

success 回调函数

入参为 Object 类型,属性如下:

名称 类型 描述 备注
selectedOneIndex number 选项一选择的值 若选择取消,返回空字符串
selectedOneOption string 选项一选择的内容 若选择取消,返回空字符串
selectedTwoIndex number 选项二选择的值 若选择取消,返回空字符串
selectedTwoOption string 选项二选择的内容 若选择取消,返回空字符串