支付寶小程序API 選項選擇器

2020-09-16 15:47 更新

my.optionsSelect

簡介

my.optionsSelect 是類似于 safari 原生 select 的組件,但是功能更加強大,一般用來替代 select,或者 2 級數(shù)據(jù)的選擇。

使用限制

不支持 2 級數(shù)據(jù)之間的聯(lián)動。

掃碼體驗

級聯(lián)選擇.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),
        });
      }
    });
  },
});

入?yún)?/h4>

入?yún)?Object 類型,屬性如下:

屬性 類型 必填 描述
title String 頭部標題信息。
optionsOne String[] 選項一列表。
optionsTwo String[] 選項二列表。
selectedOneIndex Number 選項一默認選中。默認值為 0。
selectedTwoIndex Number 選項二默認選中。默認值為 0。
positiveString String 確定按鈕文案。默認為確定。
negativeString String 取消按鈕文檔。默認為取消。

success 回調函數(shù)

入?yún)?Object 類型,屬性如下:

屬性 類型 描述
selectedOneIndex Number 選項一選擇的值。若選擇取消,則返回空字符串。
selectedOneOption String 選項一選擇的內(nèi)容。若選擇取消,則返回空字符串。
selectedTwoIndex Number 選項二選擇的值。若選擇取消,則返回空字符串。
selectedTwoOption String 選項二選擇的內(nèi)容。若選擇取消,則返回空字符串。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號