控件使用文档

飞道科技

滚动列表

Tag
Attributes
Methods
Events
Slots
Example

Tag

如果不是特别复杂的功能需求，建议使用简易版简易版文档

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

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

Attributes

`enable-pulldown-refresh`

是否启用下拉，true 或 false

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

`enable-pullupLoad`

是否启用上拉，true 或 false

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

`pulldown-threshold`

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

<fd-h000000  pulldown-threshold='100'>
</fd-h000000>

`pulldown-stop`

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

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

Methods

`finish_pull_down`

无参

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

<link href="//cdn.jsdelivr.net/npm/feidao-css/feidao.css" type="text/css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/feidao-css/theme/blue.css" type="text/css" rel="stylesheet">
<style>
.fa-icon {
  line-height: 2.5em;
  font-size: 2.5em;
  display: inline-block;
}

.fa-spin {
  -webkit-animation: fa-spin 1s infinite linear;
  animation: fa-spin 1s infinite linear;
}

@-webkit-keyframes fa-spin {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(359deg);
  transform: rotate(359deg);
  }
}

@keyframes fa-spin {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(359deg);
  transform: rotate(359deg);
  }
}

#scroll {
  width: 100%;
  height: 2.5em;
}

ul {
  -webkit-padding-start: 0;
}

ul li {
  list-style: none;
  text-align: center;
}
</style>

<div class="pure-u-1">
  <a name="demo">demo</a>
  <section style="background:pink; ">
    <div class="pos-r bg-default z-index10 text-c color-fff " style="top:0;left:0;width:100%;height:2.5em;line-height:2.5em; ">启用下拉</div>
    <button id="fd-h000000-003" class="pos-r z-index10 text-c">scroll to top</button>
    <fd-h000000 id="fd-h000000-001" style="width:9em;height:8.7em;" enable-pulldown-refresh enable-pullupLoad>
      <div slot='pulldown_wrapper' style="height:2.5em;line-height:2.5em;text-align:center;margin-top:-2.5em;">
        <span>正在刷新...</span>
      </div>
      <ul id="fd-h000000-002" slot='content'>
        <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表1</li>
        <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表2</li>
        <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表3</li>
      </ul>
      <div class="text-c" slot="pullup_wrapper">
        <span id="fd-h000000-004" class="">正在加载更多数据...</span>
      </div>
    </fd-h000000>
  </section>
</div>

const fd_h000000_001 = document.querySelector('#fd-h000000-001');
const fd_h000000_002 = document.querySelector('#fd-h000000-002');

let j = 1;
fd_h000000_001.addEventListener('fdwe-pulling-down', () => {
   console.log('pullingdown', j);
   if (j < 5) {
     setTimeout(() => {
       const tpl = `<li class="border-b" style="height:2.5em;line-height:2.5em;padding:0 0.1em;">list item ${j.toString().repeat(6)}</li>`;
       fd_h000000_002.innerHTML = tpl.repeat(20);
       fd_h000000_001.finish_pull_down();
     }, 1000);
   } else {
     setTimeout(() => {
       fd_h000000_001.finish_pull_down();
     }, 1000);
   }
   j++;
});

`finish_pull_up`

无参

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

const fd_h000000_001 = document.querySelector('#fd-h000000-001');
const fd_h000000_002 = document.querySelector('#fd-h000000-002');

let i = 1;
fd_h000000_001.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>`;
      const html = add_tpl.repeat(10);
      fd_h000000_002.insertAdjacentHTML('beforeend', html);
      fd_h000000_001.finish_pull_up();
    } else {
      document.querySelector('#footter').innerHTML = '没有数据了';
      fd_h000000_001.finish_pull_up();
    }
    i++;
  }, 2000);
});

`scroll_to`

参数为数值类型 scroll_to(-100)

滚动到指定位置

点击按钮scroll to top,无论列表当前位置在什么地方，均可滚回第一条数据处。

const fd_h000000_001 = document.querySelector('#fd-h000000-001');
const fd_h000000_003 = document.getElementById('fd-h000000-003');

fd_h000000_003.addEventListener('click', () => {
  fd_h000000_001.scroll_to(0);
});

`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-h000000 id="fd-h000000-005" 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' class="iconfont fa-spin fa-icon">&#xEa24</span>
<span slot='pulldown_wrapper' style="line-height:0.9rem;margin-left:0.05rem;">下拉刷新</span>

`pullup_wrapper`

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

<span id="loadmore-icon" slot="pullup_wrapper" class="iconfont fa-spin fa-icon">&#xEe16</span>
<span id="loadmore" slot="pullup_wrapper" style="line-height:0.9rem;margin-left:0.05rem;">加载更多</span>

这里使用了自定义样式，定义如下：

.fa-icon {
  line-height: 0.9rem;
  font-size: 0.28rem;
  display: inline-block;
}

.fa-spin {
  -webkit-animation: fa-spin 1s infinite linear;
  animation: fa-spin 1s infinite linear;
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

`content`

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

<ul id="fd-h000000-004" 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代码。例：

<link href="//cdn.jsdelivr.net/npm/feidao-css/feidao.css" type="text/css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/feidao-css/theme/blue.css" type="text/css" rel="stylesheet">
<style>
.fa-icon {
  line-height: 2.5em;
  font-size: 2.5em;
  display: inline-block;
}

.fa-spin {
  -webkit-animation: fa-spin 1s infinite linear;
  animation: fa-spin 1s infinite linear;
}

@-webkit-keyframes fa-spin {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(359deg);
  transform: rotate(359deg);
  }
}

@keyframes fa-spin {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(359deg);
  transform: rotate(359deg);
  }
}

ul {
  -webkit-padding-start: 0;
}

ul li {
  list-style: none;
  text-align: center;
}

#test {
  color: #000;
}
</style>

<div class="pure-u-1">
  <a name="demo">demo</a>
  <section style="background:pink; ">
    <div class="pos-r bg-default z-index10 text-c color-fff " style="top:0;left:0;width:100%;height:2.5em;line-height:2.5em; ">禁用下拉示例</div>
    <fd-h000000 id="fd-h000000-005" style="width:9em;height:8.7em;" enable-pulldown-refresh enable-pullupLoad>
      <div slot='pulldown_wrapper' style="height:2.5em;line-height:2.5em;text-align:center;margin-top:-2.5em;">
        <span>正在刷新...</span>
      </div>
      <div slot='content' class="relative overflow-y-s overflow-x-a" style="left:0em; top:0em; height:auto;">
        <ul id="fd-h000000-006">
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表1</li>
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表2</li>
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表3</li>
        </ul>
      </div>
      <div class="text-c" slot="pullup_wrapper">
        <span id="fd-h000000-007" class="">正在加载更多数据...</span>
      </div>
    </fd-h000000>
  </section>
</div>

`js`

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

const fd_h000000_005 = document.querySelector('#fd-h000000-005');
const fd_h000000_006 = document.querySelector('#fd-h000000-006');

let i = 1;
fd_h000000_005.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>`;
      const html = add_tpl.repeat(10);
      fd_h000000_006.insertAdjacentHTML('beforeend', html);
      fd_h000000_005.finish_pull_up();
    } else {
      document.querySelector('#fd-h000000-007').innerHTML = '没有数据了';
      fd_h000000_005.finish_pull_up();
    }
    i++;
  }, 2000);
});

禁用上滑示例

`html`

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

<!-- 通过设置控件的 enable-pulldown-refresh 属性，从而禁用上滑加载  -->
<div class="pure-u-1">
  <a name="demo">demo</a>
  <section>
    <div class="pos-r bg-default z-index10 text-c color-fff " style="top:0;left:0;width:100%;height:2.5em;line-height:2.5em; ">禁用上滑</div>
    <fd-h000000 id="fd-h000000-007" style="width:9em;height:8.7em;" enable-pulldown-refresh>
      <div slot='content' class="relative overflow-y-s overflow-x-a" style="left:0em; top:0em; height:auto;">
        <ul id="fd-h000000-008" slot='content'>
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表1</li>
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表2</li>
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表3</li>
        </ul>
      </div>
      <div class="text-c" slot="pullup_wrapper">
        <span id="fd-h000000-009" class="">正在加载更多数据...</span>
      </div>
    </fd-h000000>
  </section>
</div>

`js`

const fd_h000000_007 = document.querySelector('#fd-h000000-007');
const fd_h000000_008 = document.querySelector('#fd-h000000-008');

let i = 1;
fd_h000000_007.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>`;
      const html = add_tpl.repeat(10);
      fd_h000000_008.insertAdjacentHTML('beforeend', html);
      fd_h000000_007.finish_pull_up();
    } else {
      document.querySelector('#fd-h000000-009').innerHTML = '没有数据了';
      fd_h000000_007.finish_pull_up();
    }
    i++;
  }, 2000);
});

修改提示文字示例

`html`

<!-- 在控件内添加div元素，分别设置属性(slot='pulldown_wrapper' 和 slot="pullup_wrapper")从而替换控件下拉样式和上滑样式。
  tip: 需要添加逻辑判断下拉加载是否获取到新的数据，如果没有话，通过 DOM选择器 获取自定义的下拉展示的节点，修改其内容，通知用户没有数据了。
 -->
<div class="pure-u-1">
  <a name="demo">demo</a>
  <section style="background:pink; ">
    <div class="pos-r bg-default z-index10 text-c color-fff " style="top:0;left:0;width:100%;height:2.5em;line-height:2.5em; ">启用下拉、上滑</div>
    <fd-h000000 id="fd-h000000-010" style="width:9em;height:8.7em;" enable-pulldown-refresh enable-pullupLoad>
      <div slot='pulldown_wrapper' style="height:2.5em;line-height:2.5em;text-align:center;margin-top:-2.5em;">
        <span>正在刷新...</span>
      </div>
      <div slot='content' class="relative overflow-y-s overflow-x-a" style="left:0em; top:0em; height:auto;">
        <ul id="fd-h000000-012">
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表1</li>
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表2</li>
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表3</li>
        </ul>
      </div>
      <div class="text-c" slot="pullup_wrapper">
        <span id="fd-h000000-013" class="">正在加载更多数据...</span>
      </div>
    </fd-h000000>
  </section>
</div>

`js`

const fd_h000000_010 = document.querySelector('#fd-h000000-010');
const fd_h000000_012 = document.querySelector('#fd-h000000-012');

let i = 1;
fd_h000000_010.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>`;
      const html = add_tpl.repeat(10);
      fd_h000000_012.insertAdjacentHTML('beforeend', html);
      fd_h000000_010.finish_pull_up();
    } else {
      document.querySelector('#fd-h000000-013').innerHTML = '没有数据了';
      fd_h000000_010.finish_pull_up();
    }
    i++;
  }, 2000);
});

4完整功能示例

`html`

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

<link href="//cdn.jsdelivr.net/npm/feidao-css/feidao.css" type="text/css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/feidao-css/theme/blue.css" type="text/css" rel="stylesheet">
<style>
.fa-icon {
  line-height: 2.5em;
  font-size: 2.5em;
  display: inline-block;
}

.fa-spin {
  -webkit-animation: fa-spin 1s infinite linear;
  animation: fa-spin 1s infinite linear;
}

@-webkit-keyframes fa-spin {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(359deg);
  transform: rotate(359deg);
  }
}

@keyframes fa-spin {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(359deg);
  transform: rotate(359deg);
  }
}

#scroll {
  width: 100%;
  height: 2.5em;
}

ul {
  -webkit-padding-start: 0;
}

ul li {
  list-style: none;
  text-align: center;
}

#test {
  color: #000;
}
</style>

<div class="pure-u-1">
  <a name="demo">demo</a>
  <section style="background:pink; ">
    <div class="pos-r bg-default z-index10 text-c color-fff " style="top:0;left:0;width:100%;height:2.5em;line-height:2.5em; ">启用下拉、上滑</div>
    <button id="fd-h000000-017" class="pos-r z-index10 text-c">scroll to top</button>
    <fd-h000000 id="fd-h000000-013" style="width:9em;height:8.7em;" enable-pulldown-refresh enable-pullupLoad>
      <div slot='pulldown_wrapper' style="height:2.5em;line-height:2.5em;text-align:center;margin-top:-2.5em;">
        <span>正在刷新...</span>
      </div>
      <div slot='content' class="relative overflow-y-s overflow-x-a" style="left:0em; top:0em; height:auto;">
        <ul id="fd-h000000-014">
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表1</li>
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表2</li>
          <li class="border-b-1 " style="height:2.5em;line-height:2.5em; ">列表3
            <a id="fd-h000000-016">go</a>
          </li>
        </ul>
      </div>
      <div class="text-c" slot="pullup_wrapper">
        <span id="fd-h000000-015" class="">正在加载更多数据...</span>
      </div>
    </fd-h000000>
  </section>
</div>

`js`

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

const fd_h000000_013 = document.querySelector('#fd-h000000-013');
const fd_h000000_014 = document.querySelector('#fd-h000000-014');

let i = 1;
fd_h000000_013.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>`;
      const html = add_tpl.repeat(10);
      fd_h000000_014.insertAdjacentHTML('beforeend', html);
      fd_h000000_013.finish_pull_up();
    } else {
      document.querySelector('#fd-h000000-015').innerHTML = '没有数据了';
      fd_h000000_013.finish_pull_up();
    }
    i++;
  }, 2000);
});
let j = 1;
fd_h000000_013.addEventListener('fdwe-pulling-down', () => {
  document.querySelector('#fd-h000000-015').innerHTML = '正在加载更多数据...';
  console.log('pullingdown', j);
  if (j < 5) {
    setTimeout(() => {
      const tpl = `<li class="border-b" style="height:2.5em;line-height:2.5em;padding:0 0.1em;">list item ${j.toString().repeat(6)}</li>`;
      fd_h000000_014.innerHTML = tpl.repeat(20);
      fd_h000000_013.finish_pull_down();
    }, 1000);
  } else {
    setTimeout(() => {
      fd_h000000_013.finish_pull_down();
    }, 1000);
  }
  j++;
  i = 1;
});

const fd_h000000_016 = document.getElementById('fd-h000000-016');

fd_h000000_016.addEventListener('click', () => {
  console.log('i am clicked');
});
const fd_h000000_017 = document.getElementById('fd-h000000-017');
fd_h000000_017.addEventListener('click', () => {
  fd_h000000_013.scroll_to(0);
});