Vue-Pull-To

A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

zh-CN中文文档

Live Examples

examples

Installation

 npm install vue-pull-to --save

Usage

<template>
  <div>
    <pull-to :top-load-method="refresh">
      <ul v-for="item in dataList">
        <li>{{ item }}</li>
      </ul>
    </pull-to>
  </div> 
</template>

<script>
  import PullTo from 'vue-pull-to'
  import { fetchDataList } from 'api'
  
  export default {
    name: 'example',
    components: {
      PullTo
    },
    data() {
      return {
        dataList: []
      }
    },
    methods: {
      refresh(loaded) {
       fetchDataList()
        .then((res) => {
          this.dataList = res.data.dataList
          loaded('done')
        })
      }
    }
  }
</script>

The component will occupy 100% height of the parent element by default. props top-load-method and bottom-load-method will default to a loaded parameter, which is a function that changes the state of the component's load, and must be called once loaded. The component will always be loaded, if loaded('done') The internal state of the component will become a successful state of loading, loaded('fail') for the failure.

More usage examples

API Docs

props

topConfig and bottomConfig Configurable options and default configuration item values

const TOP_DEFAULT_CONFIG = {
  pullText: '下拉刷新', // The text is displayed when you pull down
  triggerText: '释放更新', // The text that appears when the trigger distance is pulled down
  loadingText: '加载中...', // The text in the load
  doneText: '加载完成', // Load the finished text
  failText: '加载失败', // Load failed text
  loadedStayTime: 400, // Time to stay after loading ms
  stayDistance: 50, // Trigger the distance after the refresh
  triggerDistance: 70 // Pull down the trigger to trigger the distance
}

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

slots

events