类似于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>
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 | 选项二选择的内容 | 双选才会有值,取消为”” |