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加载了更多无限滚动组件。
安装 (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 对象 |
vue下拉刷新上拉加载组件