Vue下拉刷新组件

https://github.com/bedlate/vue-data-loading

Examples

examples

Installation

 npm install vue-pull-to --save

Use Setup

<template>
  <div>
    <pull-to :top-load-method="refresh">
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
    </pull-to>
  </div> 
</template>

<script>
  import PullTo from 'vue-pull-to'
  
  export default {
    name: 'example',
    components: {
      PullTo
    },
    methods: {
      refresh(loaded) {
        setTimeout(() => {
          this.dataList.reverse();
          loaded('done');
        }, 2000);
      }
    }
  }
</script>

组件会默认占据父元素的百分之百高度。props top-load-method和bottom-load-method会默认传进一个loaded参数，该参数是一个改变组件加载状态的函数，必须调用一次loaded不然组件就会一直处于加载状态，如果执行loaded('done')组件内部状态就会变成成功加载的状态，loaded('fail')为失败。

更多使用示例请参考Examples的代码

API Docs

props

topConfig和bottomConfig可配置的选项和默认配置项的值

const TOP_DEFAULT_CONFIG = {
  pullText: '下拉刷新', // 下拉时显示的文字
  triggerText: '释放更新', // 下拉到触发距离时显示的文字
  loadingText: '加载中...', // 加载中的文字
  doneText: '加载完成', // 加载完成的文字
  failText: '加载失败', // 加载失败的文字
  loadedStayTime: 400, // 加载完后停留的时间ms
  stayDistance: 50, // 触发刷新后停留的距离
  triggerDistance: 70 // 下拉刷新触发的距离
}

const BOTTOM_DEFAULT_CONFIG = {
  pullText: '上拉加载',
  triggerText: '释放更新',
  loadingText: '加载中...',
  doneText: '加载完成',
  failText: '加载失败',
  loadedStayTime: 400,
  stayDistance: 50,
  triggerDistance: 70
}

slots

events