控件使用文档

飞道科技

滚动列表-简易版

Tag

详细配置文档

必须传入Solts 数据 属性 enable-pulldown-refresh 和 enable-pullupLoad至少存在一个

<fd-h000001 enable-pulldown-refresh='true'></fd-h000001>

Attributes

enable-pulldown-refresh

是否启用下拉，true 或 false

<fd-h000001 enable-pulldown-refresh='true'></fd-h000001>

enable-pullupLoad

是否启用上拉，true 或 false

enable-pulldown-refresh和enable-pullupLoad必须要有一个才有滑动列表效果

pulldown-threshold

拉到多低才触发下拉事件。启用下拉有效，且必须小于stop的值 类型为 数值 或字符串

<fd-h000001  pulldown-threshold='50'>
</fd-h000001>

pulldown-stop

下拉最高高度。启用下拉有效 类型为 数值 或字符串

<fd-h000001  pulldown-stop='100'>
</fd-h000001>

Methods

finish_pull_down

无参

停止下拉，恢复列表状态。在下拉事件中调用，恢复列表到正常状态，一般用于请求服务之后(成功或失败，一般为异步请求)刷新列表使用

finish_pull_up

无参

停止上滑，恢复列表状态。在上滑事件中调用，恢复列表到正常状态，一般用于请求服务之后(成功或失败，一般为异步请求)追加列表使用

scroll_to

参数为数值类型

init

初始化控件。注意已经初始化的控件不能再调用init()方法!

控件默认隐藏时, 不会对其初始化，因此没有滚动效果。

当控件切换为显示的时候需要调init()方法，把控件初始化一下。

如果调init()之后，如果要调用scroll_to()，这时应在scroll_to()外层添加延时器。示例：

const show = document.querySelector('[data-id="toggle"]');
const widget = document.querySelector('#widget-another');
show.addEventListener('click', () => {
  widget.style.display = 'block';
  widget.init();
  setTimeout(() => {
    widget.scroll_to(-220);
  }, 100);
});

Events

事件绑定示例

<fd-h000001 data-feidao-actions="fdwe-pulling-up:a001">

fdwe-pulling-up

无返回值

停止上滑事件

使用说明见停止上滑方法

fdwe-pulling-down

无返回值

停止下拉事件

使用说明见停止下拉方法

fdwe-scroll-end

无返回值

滚动停止事件

Slots

建议slot上不要传入定位相关的样式，设置pulldown-threshold属性或许是最好的选择

pulldown_wrapper

上拉提示内容，可以是图标、文字或任意内容。

<span slot='pulldown_wrapper'>下拉刷新</span>

pullup_wrapper

下滑提示内容，可以是图标、文字或任意内容。

<span slot="pullup_wrapper">加载更多</span>

content

列表的内容部分，注意，由于第三方控件的原因，这里只能存在一个根结点

<ul slot='content'>
  <li class="border-b " style="height:0.9rem;line-height:0.9rem; ">列表1</li>
  <li class="border-b " style="height:0.9rem;line-height:0.9rem; ">列表2</li>
  <li class="border-b " style="height:0.9rem;line-height:0.9rem; ">列表3</li>
</ul>

Example

完整功能示例

html

传入要测试的控件的html代码。例：

<input data-id="toggle" type="button" value="显示另外一个滑动控件">
<div data-id="the-one" style="width:100%;height:400px;">
  <fd-h000001 id="widget" style="width:100%;height:100%;" enable-pulldown-refresh enable-pullupLoad pulldown-threshold="50" pulldown-stop="60">
    <div slot='pulldown_wrapper'>
      <span>正在刷新...</span>
    </div>
    <ul id="content" slot='content' style="min-height:100%;">
      <li style="height:2.5em;line-height:2.5em;">列表1</li>
      <li style="height:2.5em;line-height:2.5em;">列表2</li>
      <li style="height:2.5em;line-height:2.5em;">列表3
        <a id="test">go</a>
      </li>
    </ul>
    <div slot="pullup_wrapper">
      <span id="footter">正在加载更多数据...</span>
    </div>
  </fd-h000001>
</div>
<div data-id="another" style="width:100%;height:600px;display:none;color:red;">
  <fd-h000001 id="widget-another" style="width:100%;height:100%;" enable-pulldown-refresh enable-pullupLoad pulldown-threshold="50" pulldown-stop="60">
    <div slot='pulldown_wrapper'>
      <span>正在刷新...</span>
    </div>
    <ul id="content" slot='content' style="min-height:700px;">
      <li style="height:2.5em;line-height:2.5em;">列表1</li>
      <li style="height:2.5em;line-height:2.5em;">列表2</li>
      <li style="height:2.5em;line-height:2.5em;">列表3
        <a id="test">go</a>
      </li>
    </ul>
    <div slot="pullup_wrapper">
      <span id="footter">正在加载更多数据...</span>
    </div>
  </fd-h000001>
</div>

js

传入测试的控件的js代码。例：

require.config({
  baseUrl,
  packages: [
  {
    name: '@dfeidao/bscroll',
    location: './node_modules/@dfeidao/bscroll/dist',
    main: "bscroll.js"
  }]
});
require(['fd-h000001', '@dfeidao/core/dom'], function (w,  { fromString }) {
  const widget = document.querySelector('#widget');
  const content = document.querySelector('#content');
  let i = 1;
  widget.addEventListener('fdwe-pulling-up', () => {
    console.log('pullingup', i);
    setTimeout(() => {
      if (i < 3) {
        const add_tpl = `<li class="border-b" style="height:2.5em;line-height:2.5em;padding:0 0.1em;">new item ${i.toString().repeat(6)}</li>`;
        content.appendChild(fromString(add_tpl.repeat(10)));
        // widget.finish_pull_up();
      } else {
        document.querySelector('#footter').innerHTML = '没有数据了';
      }
      i++;
      widget.finish_pull_up();
    }, 500);
  });
  let j = 1;
  widget.addEventListener('fdwe-pulling-down', () => {
    console.log('pullingdown', j);
    if (j < 5) {
      const tpl = `<li style="height:2.5em;line-height:2.5em;padding:0 0.1em;">list item ${j.toString().repeat(6)}</li>`;
      content.innerHTML = tpl.repeat(20);
    }
    setTimeout(() => {
      widget.finish_pull_down();
    }, 1000);
    j++;
  });

  const toggle = document.querySelector('[data-id="toggle"]');
  const anwidget = document.querySelector('#widget-another');
  toggle.addEventListener('click', () => {
    // const y = widget.bscroll.y;
    const another = document.querySelector('[data-id="another"]');
    another.style.display = 'block';
    const the = document.querySelector('[data-id="the-one"]');
    the.style.display = 'none';
    console.log(widget);
    anwidget.refresh();
    // setTimeout(() => {
    // 	anwidget.scroll_to(y);
    // }, 100);
  });
});