Aimi-Ding/vpull-refresh

基于vue封装的轻量级下拉刷新组件

vpull-refresh

基于vue封装的轻量级下拉刷新组件

如何使用

将项目中的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>