Github地址：vpull-refresh
如何使用
將項目中的src/components/pullRefresh.vue和src/img拷貝到你的工程內(nèi)。如層級發(fā)生改變，你需要手動修改pullRefresh.vue中的圖片鏈接地址。
API
| 屬性 | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| refreshing | 是否處于刷新狀態(tài) | boolean | false |
| onRefresh | 刷新的回調(diào)函數(shù) | function | () => {} |
| tipHeight | 刷新提示信息的高度 | string | 50px |
| pullHeight | 滾動區(qū)域高度 | 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() {
//刷新前需要先手動將設(shè)為true，否則pull-refresh不會監(jiān)測到狀態(tài)變化
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>
