JSAPI

  • 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)
    

    入参

    名称类型描述必选默认值版本
    titlestring头部标题信息N9.9
    optionsOneArray选项一列表Y
    optionsTwoArray选项二列表N
    selectedOneIndexnumber选项一默认选中N0
    selectedTwoIndexnumber选项二默认选中N0
    positiveStringstring确定按钮文案N‘确定’
    negativeStringstring取消按钮文档N‘取消’
    fnfunction回调函数N

    出参

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

    名称类型描述备注
    selectedOneIndexnumber选项一选择的值取消为””
    selectedOneOptionstring选项一选择的内容取消为””
    selectedTwoIndexnumber选项二选择的值双选才会有值,取消为””
    selectedTwoOptionstring选项二选择的内容双选才会有值,取消为””