beehiveOptionsPicker 选择组件

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)

入参

出参

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