Since 9.9.0

beehiveOptionsPicker

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

实现

使用方法

// 单列选项
AlipayJSBridge.call('beehiveOptionsPicker', {
    title: "hello",
    optionsOne: ["1", "2", "3"]
  }, function(result) {
    console.log(result);
  }
);

//双列选项
AlipayJSBridge.call('beehiveOptionsPicker', {
    title: "hello",
    optionsOne: ["1", "2", "3"],
    optionsTwo: ["1", "2", "3"]
  }, function(result) {
    console.log(result);
  }
);

代码演示

单列选择功能

<h1>点击按钮查看效果</h1>
<a href="javascript:void(0)" class="btn invoke">选择还款日</a>

<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.invoke').addEventListener('click', function() {
    AlipayJSBridge.call('beehiveOptionsPicker', {
      title: "还款日选择",
      optionsOne: ["每周一", "每周二", "每周三", "每周四", "每周五", "每周六", "每周日"],
      selectedOneIndex: 2,
    }, function(result) {
      alert(JSON.stringify(result));
    });
  })
}, false);
</script>

查看演示

扫码查看

用支付宝扫码运行

双列选择功能

<h1>点击按钮查看效果</h1>
<a href="javascript:void(0)" class="btn invoke">选择出生年月</a>

<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.invoke').addEventListener('click', function() {  
    AlipayJSBridge.call('beehiveOptionsPicker', {
      title: "出生年月选择",
      optionsOne: ["2014年", "2013年", "2012年", "2011年", "2010年", "2009年", "2008年"],
      optionsTwo: ["一月", '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      selectedOneIndex: 3,
      selectedTwoIndex: 5,
    }, function(result) {
      alert(JSON.stringify(result));
    });
  });
}, false);
</script>

查看演示

扫码查看

用支付宝扫码运行

API

AlipayJSBridge.call('beehiveOptionsPicker', {
  title, optionsOne, optionsTwo, selectedOneIndex,
  selectedTwoIndex, positiveString, negativeString
}, fn)

入参

名称	类型	描述	必选	默认值	版本
title	string	头部标题信息	N		9.9
optionsOne	Array	选项一列表	Y
optionsTwo	Array	选项二列表	N
selectedOneIndex	number	选项一默认选中	N	0
selectedTwoIndex	number	选项二默认选中	N	0
positiveString	string	确定按钮文案	N	‘确定’
negativeString	string	取消按钮文档	N	‘取消’
fn	function	回调函数	N

出参

回调函数带入的参数result: {selectedOneIndex, selectedOneOption, selectedTwoIndex, selectedTwoOption}

名称	类型	描述	备注
selectedOneIndex	number	选项一选择的值	取消为””
selectedOneOption	string	选项一选择的内容	取消为””
selectedTwoIndex	number	选项二选择的值	双选才会有值，取消为””
selectedTwoOption	string	选项二选择的内容	双选才会有值，取消为””

JSAPI

beehiveOptionsPicker

实现

使用方法

代码演示

单列选择功能

双列选择功能

API

入参

出参