控件使用文档

飞道科技

滚动选择器

兼容性

该控件不支持IE11、Edge浏览器

建议使用Google浏览器

Tag

必须传入 value

<fd-h000002></fd-h000002>

Attributes

default_key_or_value

默认选项的key或者value，默认第一项 类型为 数值 或 字符串

<fd-h000002 default_key_or_value="5"  value='[{"key":"0","value":"选项1"},{"key":"1","value":"选项2"},{"key":"2","value":"选项3"},{"key":"3","value":"选项4"},{"key":"4","value":"选项5"},{"key":"5","value":"选项6"},{"key":"6","value":"选项7"}]'></fd-h000002 >

value

渲染控件的数据，例： 类型为为数组，数组内存放对象，对象必须是键值对，例： {“key”:”0”,”value”:”选项1”}

html

<button class="pure-button pure-button-primary" id="fd-h000002-002">one column picker demo1</button>
<button class="pure-button pure-button-primary" id="fd-h000002-003">scroll_to key 2</button>
<fd-h000002 id="fd-h000002-001"  value='[{"key":"0","value":"选项1"},{"key":"1","value":"选项2"},{"key":"2","value":"选项3"},{"key":"3","value":"选项4"},{"key":"4","value":"选项5"},{"key":"5","value":"选项6"},{"key":"6","value":"选项7"}]'></fd-h000002 >

js

const fd_h000002_001 = document.querySelector('#fd-h000002-001');
const fd_h000002_002 = document.getElementById('fd-h000002-002');

fd_h000002_002.addEventListener('click', () => {
  fd_h000002_001.show();
});

Methods

scroll_to

参数为 自定义控件value属性的一个value值，类型一般为string

滚动到指定位置 @param key_or_value 指定项的key或者value 点击按钮scroll_to key 2,无论列表当前位置在什么地方，均可滚回key为2的位置处。

html

 <button class="pure-button pure-button-primary" id="fd-h000002-005">one column picker demo1</button>
<button class="pure-button pure-button-primary" id="fd-h000002-006">scroll_to key 2</button>
<fd-h000002 id="fd-h000002-004"  value='[{"key":"0","value":"选项1"},{"key":"1","value":"选项2"},{"key":"2","value":"选项3"},{"key":"3","value":"选项4"},{"key":"4","value":"选项5"},{"key":"5","value":"选项6"},{"key":"6","value":"选项7"}]'></fd-h000002 >

const fd_h000002_004 = document.querySelector('#fd-h000002-004');
const fd_h000002_005 = document.getElementById('fd-h000002-005');
const fd_h000002_006 = document.getElementById('fd-h000002-006');

fd_h000002_005.addEventListener('click', () => {
  fd_h000002_004.show();
});

fd_h000002_006.addEventListener('click', () => {
  fd_h000002_004.scroll_to('2');
});

show

无参

显示控件（控件默认是不在可视区域的）

const fd_h000002_004 = document.querySelector('#fd-h000002-004');
const fd_h000002_005 = document.getElementById('fd-h000002-005');

fd_h000002_005.addEventListener('click', () => {
  fd_h000002_004.show();
});

Events

feidao-web事件绑定示例

<fd-h000002 data-feidao-actions="fdwe-change:a001" value='[{"key":"0","value":"选项1"},{"key":"1","value":"选项2"},{"key":"2","value":"选项3"},{"key":"3","value":"选项4"},{"key":"4","value":"选项5"},{"key":"5","value":"选项6"},{"key":"6","value":"选项7"}]'></fd-h000002 >

fdwe-change

返回值如下

{"key":"5","value":"选项6"}

滚动停止时触发此事件，监听之可得到输出参数{ key: string, value: string }，此选中值不一定改变

fdwe-sure

返回值如下

{"key":"5","value":"选项6"}

点击确定按钮触发此事件，监听之可得到输出参数{ key: string, value: string }

fdwe-cancel

无返回值

点击取消按钮触发此事件

Example

滚动到指定位置

html

<a name="demo1">demo1</a>
<section>
  <div class="pure-g">
    <div class="pure-u-1 text-c mt1">
    <button class="pure-button pure-button-primary" id="fd-h000002-008">one column picker demo1</button>
    <button class="pure-button pure-button-primary" id="fd-h000002-009">scroll_to key 2</button>
    </div>
    <div class="pure-u-1 ht2 l-ht2 mt1">
    <span id="cue"></span>
    </div>
    <div class="pure-u-1">
    <fd-h000002 id="fd-h000002-007" default_key_or_value='2' value='[{"key":"0","value":"选项1"},{"key":"1","value":"选项2"},{"key":"2","value":"选项3"},{"key":"3","value":"选项4"},{"key":"4","value":"选项5"},{"key":"5","value":"选项6"},{"key":"6","value":"选项7"}]'>
    </fd-h000002>
    </div>
  </div>
</section>

js


const fd_h000002_007 = document.querySelector('#fd-h000002-007');
const fd_h000002_008 = document.getElementById('fd-h000002-008');
const fd_h000002_009 = document.getElementById('fd-h000002-009');

fd_h000002_008.addEventListener('click', () => {
  fd_h000002_007.show();
});
fd_h000002_009.addEventListener('click', () => {
  fd_h000002_007.scroll_to('2');
});

完整示例

html

<a name="demo1">demo1</a>
<section>
  <div class="pure-g">
    <div class="pure-u-1 text-c mt1">
    <button class="pure-button pure-button-primary" id="fd-h000002-011">one column picker demo1</button>
    <button class="pure-button pure-button-primary" id="fd-h000002-012">scroll_to key 2</button>
    </div>
    <div class="pure-u-1 ht2 l-ht2 mt1">
    <span id="fd-h000002-013"></span>
    </div>
    <div class="pure-u-1">
    <fd-h000002 id="fd-h000002-010" default_key_or_value='2' value='[{"key":"0","value":"选项1"},{"key":"1","value":"选项2"},{"key":"2","value":"选项3"},{"key":"3","value":"选项4"},{"key":"4","value":"选项5"},{"key":"5","value":"选项6"},{"key":"6","value":"选项7"}]'>
    </fd-h000002>
    </div>
  </div>
</section>

js


const fd_h000002_010 = document.querySelector('#fd-h000002-010');
const fd_h000002_011 = document.getElementById('fd-h000002-011');
const fd_h000002_012 = document.getElementById('fd-h000002-012');
const fd_h000002_013 = document.getElementById('fd-h000002-013');

fd_h000002_010.addEventListener('fdwe-cancel', () => {
  fd_h000002_013.innerHTML = 'fdwe-cancel';
});
fd_h000002_010.addEventListener('fdwe-change', (data) => {
  fd_h000002_013.innerHTML = 'fdwe-change：' + data.key + ':' + data.value;
});
fd_h000002_010.addEventListener('fdwe-sure', (data) => {
  fd_h000002_013.innerHTML = 'fdwe-sure：' + data.key + ':' + data.value;
});
fd_h000002_010.addEventListener('fdwe-change', (data) => {
  fd_h000002_013.innerHTML = 'fdwe-change：' + data.key + ':' + data.value;
});
fd_h000002_011.addEventListener('click', () => {
  fd_h000002_013.innerHTML = 'show()';
  fd_h000002_010.show();
});
fd_h000002_012.addEventListener('click', () => {
  fd_h000002_013.innerHTML = 'scroll_to("2")';
  fd_h000002_010.scroll_to('2');
});