如何使用
将项目中的src/components/pullRefresh.vue和src/img拷贝到你的工程内。如层级发生改变，你需要手动修改pullRefresh.vue中的图片链接地址。
API
| 属性 |
说明 |
类型 |
默认值 |
| refreshing |
是否处于刷新状态 |
boolean |
false |
| onRefresh |
刷新的回调函数 |
function |
() => {} |
| tipHeight |
刷新提示信息的高度 |
string |
50px |
| pullHeight |
滚动区域高度 |
string |
100vh |
| pullTip |
下拉时的提示文字 |
string |
下拉即可刷新 |
| refreshTip |
刷新中的提示文字 |
string |
正在刷新 |
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <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>
|
手动刷新
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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>
|