codecamp

支付宝小程序API 选项选择器

my.optionsSelect

简介

my.optionsSelect 是类似于 safari 原生 select 的组件,但是功能更加强大,一般用来替代 select,或者 2 级数据的选择。

使用限制

不支持 2 级数据之间的联动。

扫码体验

级联选择.png

示例代码

// 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 选项二选择的内容。若选择取消,则返回空字符串。
支付宝小程序API 节点查询
支付宝小程序API 级联选择
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }