选项选择器

该接口用于实现选项选择器。

my.optionsSelect

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

效果示例

options select

代码示例

// API-DEMO page/API/options-select/options-select.json
{
     "defaultTitle": "选项选择器"
}
<!-- API-DEMO page/API/options-select/options-select.axml-->
<view class="page">
  <view class="page-description">选项选择器 API</view>
  <view class="page-section">
    <view class="page-section-title">my.optionsSelect</view>
    <view class="page-section-demo">
      <button type="primary" onTap="openOne">单列选择器</button>
    </view>
    <view class="page-section-demo">
      <button type="primary" onTap="openTwo">双列选择器</button>
    </view>
  </view>
</view>
// API-DEMO page/API/options-select/options-select.js
Page({
  openOne() {
    my.optionsSelect({
      title: "还款日选择",
      optionsOne: ["每周一", "每周二", "每周三", "每周四", "每周五", "每周六", "每周日"],
      selectedOneIndex: 2,
      success(res) {
        my.alert({
          content: JSON.stringify(res, null, 2),
        });
      }
    });
  },
  openTwo() {
    my.optionsSelect({
      title: "出生年月选择",
      optionsOne: ["2014年", "2013年", "2012年", "2011年", "2010年", "2009年", "2008年"],
      optionsTwo: ["一月", '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      selectedOneIndex: 3,
      selectedTwoIndex: 5,
      success(res) {
        my.alert({
          content: JSON.stringify(res, null, 2),
        });
      }
    });
  },
});

入参

入参为 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

选项二选择的内容

若选择取消,返回空字符串

阿里云首页 移动开发平台 mPaaS 相关技术圈