vue下拉刷新上拉加载组件_下拉刷新和上载为Vue.js加载了更多且无限滚动组件

vue下拉刷新上拉加载组件

Vue-Pull-To (Vue-Pull-To)

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

下拉刷新和上载为Vue.js加载了更多无限滚动组件。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm install vue-pull-to --save

使用设置 (Use Setup)

<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.

默认情况下，该组件将占据父元素100％的高度。 props top-load-method和bottom-load-method将默认为一个已加载的参数，此参数可更改组件的加载状态，必须在加载后调用。 如果已loaded('done')组件，则将始终加载该组件loaded('done')如果已loaded('done') ，该组件的内部状态将成为加载的成功状态，如果loaded('fail') ，将变为已loaded('fail') 。

For more examples, please refer to examples of the code

有关更多示例，请参阅代码示例

API文件 (API Docs)

道具 (props)

Attribute	Description	type	Default
distance-index	Slip the threshold (the greater the value the slower the sliding)	Number	2
top-block-height	The height of the block element area outside the top of the scroll container	Number	50
bottom-block-height	The height of the block element area outside the scrolling container	Number	50
wrapper-height	The height of the scrolling container	String	'100%'
top-load-method	Top drop-down method	Function
bottom-load-method	Bottom pull-up method	Function
is-throttle-top-pull	Whether the disable of the top-pull throttle event is triggered to ensure performance if the real-time trigger is set to false	Boolean	true
is-throttle-bottom-pull	Whether the disable of the bottom-pull throttle event is triggered to ensure performance if the real-time trigger is set to false	Boolean	true
is-throttle-scroll	Whether the disable of the scroll throttle event is triggered to ensure performance if the real-time trigger is set to false	Boolean	true
is-top-bounce	Whether to enable the pull-down bounce effect	Boolean	true
is-bottom-bounce	Whether to enable the pull-up bounce effect	Boolean	true
top-config	Scroll the container at the top of the configuration	Object	default config
bottom-config	Scroll the container at the bottom of the configuration	Object	default config

属性	描述	类型	默认
距离指数	滑动阈值(值越大滑动越慢)	数	2
顶块高度	滚动容器顶部外侧的块元素区域的高度	数	50
底块高度	滚动容器外部的块元素区域的高度	数	50
包装高度	滚动容器的高度	串	'100％'
最高负荷方法	顶部下拉方法	功能
底部加载方法	底部上拉方法	功能
节气门上拉	如果实时触发器设置为false，是否触发了top-pull油门事件的禁用以确保性能	布尔型	真正
油门向下拉	如果实时触发器设置为false，是否触发bottom-pull油门事件的禁用以确保性能	布尔型	真正
节气门滚动	如果实时触发器设置为false，是否触发scroll油门事件的禁用以确保性能	布尔型	真正
顶反弹	是否启用下拉弹跳效果	布尔型	真正
底部反弹	是否启用上拉弹跳效果	布尔型	真正
顶级配置	滚动配置顶部的容器	目的	默认配置
底部配置	滚动配置底部的容器	目的	默认配置

topConfig and bottomConfig Configurable options and default configuration item values

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

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)

Name	Description	scope
default	The default slot scrolls the contents of the container
top-block	Scroll the contents of the top of the container outer (support the scope slot need to use template tag with scope attribute)	state：Current state、state-text：State corresponding to the text
bottom-block	Scroll the contents of the bottom of the container outer (support the scope slot need to use template tag with scope attribute)	state：Current state、state-text：State corresponding to the text

名称	描述	范围
默认	默认插槽滚动容器的内容
头版	滚动容器外部顶部的内容(支持范围插槽需要使用带有scope attribute template标签)	state ：当前状态， state-text ： state-text对应的state-text
底层	滚动容器外部底部的内容(支持范围插槽需要使用带有scope attribute template标签)	state ：当前状态， state-text ： state-text对应的state-text

大事记 (events)

name	Description
top-state-change	When the top state has changed, the first parameter is the current state
bottom-state-change	When the bottom state has changed, the first parameter is the current state
top-pull	Pull down the trigger, the first parameter for the current pull of the distance value, the default will be throttle, config isThrottle to real-time trigger
bottom-pull	Pull up the trigger, the first parameter for the current pull of the distance value, the default will be throttle, config isThrottle to real-time trigger
infinite-scroll	Triggered when the scroll container scrolls to the end
scroll	When scrolling, the event callback function, the first parameter, is the native event object

名称	描述
最高状态变化	当顶部状态更改时，第一个参数是当前状态
底层状态变化	当底部状态已更改时，第一个参数是当前状态
上拉	下拉触发器，第一个参数为当前拉动的距离值，默认为油门，配置isThrottle为实时触发器
底拉	上拉触发器，当前距离的第一个参数为拉出距离值，默认为油门，config isThrottle为实时触发器
无限滚动	当滚动容器滚动到末尾时触发
滚动	滚动时，事件回调函数(第一个参数)是本机event对象

翻译自: https://vuejsexamples.com/a-pull-down-refresh-and-pull-up-load-more-and-infinite-scroll-component-for-vue-js/

vue下拉刷新上拉加载组件