Github地址：vpull-refresh
如何使用
将项目中的src/components/pullRefresh.vue和src/img拷贝到你的工程内。如层级发生改变，你需要手动修改pullRefresh.vue中的图片链接地址。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| refreshing | 是否处于刷新状态 | boolean | false |
| onRefresh | 刷新的回调函数 | function | () => {} |
| tipHeight | 刷新提示信息的高度 | string | 50px |
| pullHeight | 滚动区域高度 | string | 100vh |
| pullTip | 下拉时的提示文字 | string | 下拉即可刷新 |
| refreshTip | 刷新中的提示文字 | string | 正在刷新 |
示例
<template>
<pull-refresh :refreshing="isRefreshing" :on-refresh="onRefresh" pull-height="400px">
<div class="list">
<p v-for="n in 20">{{n}}</p>
</div>
</pull-refresh>
</template>
<script>
import pullRefresh from "@/components/pullRefresh.vue";
export default {
name: 'Example',
data() {
return {
isRefreshing: false
}
},
methods: {
onRefresh() {
//刷新前需要先手动将设为true，否则pull-refresh不会监测到状态变化
this.isRefreshing = true;
setTimeout(() => {
this.isRefreshing = false;
}, 5000)
}
},
components: { pullRefresh }
}
</script>
<style scoped>
.list {
background-color: white;
}
p {
margin: 0;
}
</style>
手动刷新
<pull-refresh :refreshing="isRefreshing">
<div class="list">
<p v-for="n in 20">{{n}}</p>
<button @tap="refresh">手动刷新</button>
</div>
</pull-refresh>
<script>
//在methods中添加如下代码
tap() {
this.isRefreshing = true;
setTimeout(() => {
this.isRefreshing = false;
}, 5000)
}
</script>
