@ctmobile/ui-scrollload-sd

1.0.1 • Public • Published

ScrollLoad

基本布局


<div class="ct-scrolload">
  <header>header</header>
  <div class="ct-scrolload-content">
    <ul id="listView">
      ...
    </ul>
    <div class="ct-scrolload-load standard">数据加载中</div>
    <div class="ct-scrolload-empty">~没有更多</div>
    <div class="ct-scrolload-error">出现错误</div>
  </div>
  <footer>footer</footer>
</div>

  • ct-scrolload - 整体容器
    • 头元素(header) - 用来遮罩下拉刷新
    • ct-scrolload-content - 可滚动容器
      • 任意一个元素(listView) - 用来显示滚动数据
      • ct-scrolload-load - 加载tip
      • ct-scrolload-empty - 没有数据的tip
      • ct-scrolload-error - 错误tip
    • 底部元素(footer)

初始化


import ScrollLoad, { CONSTANT } from '@ctmobile/ui-scrollload';
import '@ctmobile/ui-scrollload/lib/themes/default/scrollload.less';
import '@ctmobile/ui-scrollload/lib/scrollload.less';

function appendData() {
  const df = document.createDocumentFragment();

  for (let i = 0; i < 30; i++) {
    df.appendChild($(<pre><code class="html">'<li>CTMobileUI移动框架中的ScrollLoad组件</li>'</code></pre>)[0]);
  }

  listViewEl.appendChild(df);
}

const listViewEl = $('#listView')[0];
let count = 0;

appendData();

const scrollLoad = ScrollLoad(document.getElementById('container'));

scrollLoad.on('scrollbottom', (config) => {
  if (count === 3) {
    config.done(CONSTANT.EMPTY);
  } else {
    setTimeout(() => {
      appendData();
      config.done(CONSTANT.NORMAL);
      count++;
    }, 1000 * 3);
  }
});

scrollLoad.on('emptyclick', () => {
  console.log('emptyclick');
});

scrollLoad.on('errorclick', () => {
  console.log('errorclick');
});

名称 说明
{HtmlElement} - el 整体元素
{object} - config

配置

distance {number} - 属性允许配置距页面底部(以px为单位)的距离以触发无限滚动事件。默认情况下,如果未指定,则为50(px) |

例子

html


  <div class="ct-scrolload" id="container">
    <header>ScrollLoad</header>
    <div class="ct-scrolload-content" id="content">

      <div class="ct-scrolload-load standard">数据加载中</div>
      <div class="ct-scrolload-empty">~没有更多</div>
      <div class="ct-scrolload-error">出现错误</div>
    </div>
    <footer></footer>
  </div>

js


import ScrollLoad, { CONSTANT } from '@ctmobile/ui-scrollload';
import '@ctmobile/ui-scrollload/lib/themes/default/scrollload.less';
import '@ctmobile/ui-scrollload/lib/scrollload.less';

function appendData() {
  const df = document.createDocumentFragment();

  for (let i = 0; i < 30; i++) {
    df.appendChild($(<pre><code class="html">'<li>CTMobileUI移动框架中的ScrollLoad组件</li>'</code></pre>)[0]);
  }

  listViewEl.appendChild(df);
}

const listViewEl = $('#listView')[0];
let count = 0;

appendData();

const scrollLoad = ScrollLoad(document.getElementById('container'));

scrollLoad.on('scrollbottom', (config) => {
  if (count === 3) {
    config.done(CONSTANT.EMPTY);
  } else {
    setTimeout(() => {
      appendData();
      config.done(CONSTANT.NORMAL);
      count++;
    }, 1000 * 3);
  }
});

scrollLoad.on('emptyclick', () => {
  console.log('emptyclick');
});

scrollLoad.on('errorclick', () => {
  console.log('errorclick');
});

方法

getLoadEl - 获取.ct-scrolload-load元素

getEmptyEl - 获取.ct-scrolload-empty元素

getErrorEl - 获取.ct-scrolload-error元素

hideAll - 隐藏所有.ct-scrolload-元素

on( type, handler, ) - 注册事件

  • type-string 事件类型
  • handler-Function 事件句柄

off( type, handler, ) - 注销事件

  • type-string 事件类型
  • handler-Function 事件句柄

事件

名称 说明
scrollbottom 滚动到了底部
emptyclick 点击了没有数据
errorclick 点击了错误

import ScrollLoad, { CONSTANT } from '@ctmobile/ui-scrollload';
import '@ctmobile/ui-scrollload/themes/default/scrollload.less';
import '@ctmobile/ui-scrollload/scrollload.less';

function appendData() {
  const df = document.createDocumentFragment();

  for (let i = 0; i < 30; i++) {
    df.appendChild($(<pre><code class="html">'<li>CTMobileUI移动框架中的ScrollLoad组件</li>'</code></pre>)[0]);
  }

  listViewEl.appendChild(df);
}

const listViewEl = $('#listView')[0];
let count = 0;

appendData();

const scrollLoad = ScrollLoad(document.getElementById('container'));

scrollLoad.on('scrollbottom', (config) => {
  if (count === 3) {
    config.done(CONSTANT.EMPTY);
  } else {
    setTimeout(() => {
      appendData();
      config.done(CONSTANT.NORMAL);
      count++;
    }, 1000 * 3);
  }
});

scrollLoad.on('emptyclick', () => {
  console.log('emptyclick');
});

scrollLoad.on('errorclick', () => {
  console.log('errorclick');
});

Package Sidebar

Install

npm i @ctmobile/ui-scrollload-sd

Weekly Downloads

5

Version

1.0.1

License

MIT

Unpacked Size

30.1 kB

Total Files

8

Last publish

Collaborators

  • playerljc