@ctmobile/ui-pullrefresh

PullRefresh

• 基本布局
• 初始化
• 例子
• 方法
• 事件
  • pullStart
  • pullRebound
  • pullCanRefresh
  • pullBottom
  • pullRefresh

基本布局

• containerBlock - 整体容器
  • ct-pullrefresh - 下拉刷新容器
  • headerBlock - 头容器，覆盖下拉刷新容器
  • scrollBlock - 滚动容器
    • scrollInnerBlock - 滚动内容容器

初始化

import PullRefresh from '@ctmobile/ui-pullrefresh';
import '@ctmobile/ui-pullrefresh/themes/default/pullrefresh.less';
import '@ctmobile/ui-pullrefresh/pullrefresh.less';

const scrollEl = document.getElementById('content');
const scrollInnerEl = document.getElementById('list');
const pullEl = document.getElementById('ct-pullrefresh');

const pullRefresh = PullRefresh({
  scrollEl, scrollInnerEl, pullEl,
});

pullRefresh.on('pullRefresh', (ins) => {
  setTimeout(() => {
    ins.reset();
  }, 1000 * 2);
});

名称	说明
{HtmlElement} - scrollEl	滚动元素
{HtmlElement} - scrollInnerEl	滚动元素inner
{HtmlElement} - pullEl	下拉刷新元素
{number} - pullHeight	拉动高度
{string} - icon	图标html
{string} - label	默认文本html
{string} - canLabel	可以刷新文本html
{boolean} - showUpdate	是否显示更新时间
{string} - loadingAnimation	动画html

例子

html

<div id="container">

  <header id="header">pullrefreshExample</header>
  <div id="content" class="ct-list ios media-list">
    <ul id="list">
      <li>
        <div class="item-content">

          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Yellow Submarine</div>
            </div>
            <div class="item-subtitle">Beatles</div>
          </div>
        </div>
      </li>
      <li>
        <a class="item-link item-content">

          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Don't Stop Me Now</div>
            </div>
            <div class="item-subtitle">Queen</div>
          </div>
        </a>
      </li>
      <li>
        <div class="item-content">

          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Billie Jean</div>
            </div>
            <div class="item-subtitle">Michael Jackson</div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">

          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Yellow Submarine</div>
            </div>
            <div class="item-subtitle">Beatles</div>
          </div>
        </div>
      </li>
      <li>
        <a class="item-link item-content">

          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Don't Stop Me Now</div>
            </div>
            <div class="item-subtitle">Queen</div>
          </div>
        </a>
      </li>
      <li>
        <div class="item-content">

          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Billie Jean</div>
            </div>
            <div class="item-subtitle">Michael Jackson</div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">

          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Yellow Submarine</div>
            </div>
            <div class="item-subtitle">Beatles</div>
          </div>
        </div>
      </li>
      <li>
        <a class="item-link item-content">

          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Don't Stop Me Now</div>
            </div>
            <div class="item-subtitle">Queen</div>
          </div>
        </a>
      </li>
      <li>
        <div class="item-content">

          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Billie Jean</div>
            </div>
            <div class="item-subtitle">Michael Jackson</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <footer id="footer">
    <button id="pullrefresh-api-button">手动触发刷新</button>
  </footer>
</div>

js

import PullRefresh from '@ctmobile/ui-pullrefresh';
import '@ctmobile/ui-pullrefresh/themes/default/pullrefresh.less';
import '@ctmobile/ui-pullrefresh/pullrefresh.less';
import './index.less';

const scrollEl = document.getElementById('content');
const scrollInnerEl = document.getElementById('list');
const pullEl = document.getElementById('ct-pullrefresh');
const pullRefreshApiButton = document.getElementById('pullrefresh-api-button');

pullRefreshApiButton.addEventListener('click', () => {
  pullRefresh.refresh();
});

const pullRefresh = PullRefresh({
  scrollEl, scrollInnerEl, pullEl,
});

pullRefresh.on('pullRefresh', (ins) => {
  setTimeout(() => {
    ins.reset();
  }, 1000 * 2);
});

方法

reset - 取消下拉刷新

refresh - 手动调用下拉刷新

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

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

off( type, handler, ) - 删除指定type下的时间或清除所有事件

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

事件

名称	说明
pullStart	拉动开始
pullRebound	没有具备刷新条件弹回
pullcanrefresh	具备刷新条件
pullBottom	拉动到了底部
pullRefresh	刷新

import PullRefresh from '@ctmobile/ui-pullrefresh';
import '@ctmobile/ui-pullrefresh/themes/default/pullrefresh.less';
import '@ctmobile/ui-pullrefresh/pullrefresh.less';
import './index.less';

const scrollEl = document.getElementById('content');
const scrollInnerEl = document.getElementById('list');
const pullEl = document.getElementById('ct-pullrefresh');
const pullRefreshApiButton = document.getElementById('pullrefresh-api-button');

pullRefreshApiButton.addEventListener('click', () => {
  pullRefresh.refresh();
});

const pullRefresh = PullRefresh({
  scrollEl, scrollInnerEl, pullEl,
});

pullRefresh.on('pullStart',() => {console.log('pullStart')});
pullRefresh.on('pullRebound',() => {console.log('pullRebound')});
pullRefresh.on('pullCanRefresh', () => {console.log('pullCanRefresh')});
pullRefresh.on('pullBottom', () => {console.log('pullBottom')});
pullRefresh.on('pullRefresh', () => {console.log('pullRefresh')});

pullRefresh.on('pullRefresh', (ins) => {
  setTimeout(() => {
    ins.reset();
  }, 1000 * 2);
});