封装 vant refresh

第二版 优化版来了

<template>
  <div class="refresh-box">
    <van-pull-refresh
      class="refresh"
      v-model="refresh.refreshing"
      @refresh="onRefresh"
    >
      <!-- 下拉縮放 -->
      <template #pulling="props">
        <img
          class="self_refresh_doge"
          src="../../assets/refresh/refresh_.gif"
          :style="{ transform: `scale(${props.distance / 80})` }"
        />
      </template>
      <!-- 下拉時 -->
      <template #loosing>
        <img
          class="self_refresh_doge"
          src="../../assets/refresh/refresh_.gif"
        />
      </template>
      <!-- loading -->
      <template #loading>
        <img
          class="self_refresh_doge"
          src="../../assets/refresh/refresh_.gif"
        />
      </template>
      <!-- 成功 -->
      <template #success>
        <img
          class="self_refresh_doge"
          src="../../assets/refresh/refresh_end.gif"
        />
      </template>
      <template v-if="hideUp">
        <slot></slot>
      </template>
      <template v-else>
        <van-list
          v-model="refresh.loading"
          :finished="refresh.finished"
          :finished-text="lang_['No more data']"
          :loading-text="lang_['loading_in']"
          @load="onLoad"
        >
          <slot></slot>
        </van-list>
      </template>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "self-refresh",
  props: {
    loading: {
      default () {
        return false
      }
    },
    // 是否隱藏 上拉加載
    hideUp: {
      default () {
        return false;
      }
    },
  },
  model: {
    prop: "loading",
    event: "isload"
  },
  watch: {
    loading (n, o) {
      if (n == true) {
        this.onRefresh();
      }
    }
  },
  data () {
    return {
      refresh: {
        loading: false, // 上拉加載是否開啟
        finished: false, // 上拉加載 是否完成
        refreshing: false // 是否開啟下拉刷新
      },
      //當前模式
      type: "down",
      lang_: {
        "No more data": "沒有更多數據了",
        loading_in: "加载中,请稍后..."
      }
    };
  },
  created () {
    this.initLang();
  },
  methods: {
    initLang () {
      let lang_ = this.lang_;
      for (let i in lang_) {
        lang_[i] = this.$_(i);
      }
    },
    // 下拉刷新
    onRefresh () {

      // 打開下拉刷新
      this.$emit("onRefresh", "down", () => {
        this.refresh.refreshing = false;
        this.refresh.loading = false;;
        this.refresh.finished = false;
        this.$emit('isload', false);
      }); // 觸發下拉刷新
      this.type = "down"; // 修改狀態
    },
    // 上拉加載
    onLoad () {
      this.$emit("onRefresh", "up", (t) => {
        if (t) {
          this.refresh.finished = true;
        } else {
          this.refresh.loading = false;
        }
      }); // 觸發 上拉加載
      this.type = "up"; // 修改狀態
    },
  }
};
</script>

<style lang="less" scoped>
.refresh-box {
  background-color: #f0f0f0;
  height: calc(100vh - 44px);
  .refresh {
    min-height: 100%;
  }
  .self_refresh_doge {
    width: 40px;
  }
}
</style>

 使用

    <selfRefresh
      v-model="loading"
      @onRefresh="onRefresh"
      :hideUp="true"
    >

    </selfRefresh>



 data(){

    return {
        loading: false, // 是否在加載
    }
 }




    onRefresh (type, _) {
      this.getAllListFun();
      xxx().then(res => {
        if (res.success) {
          if (type == 'down') {
            _();
          }
        }
      })

    },

---

 新建  refresh.vue 

refresh 的 template  部分, 可以根据自己需求修改.

<template>
  <div class="refresh-box">
    <van-pull-refresh
      v-model="refresh.refreshing"
      @refresh="onRefresh"
    >
      <!-- 下拉縮放 -->
      <template #pulling="props">
        <img
          class="self_refresh_doge"
          src="../../assets/refresh/refresh_.gif"
          :style="{ transform: `scale(${props.distance / 80})` }"
        />
      </template>
      <!-- 下拉時 -->
      <template #loosing>
        <img
          class="self_refresh_doge"
          src="../../assets/refresh/refresh_.gif"
        />
      </template>
      <!-- loading -->
      <template #loading>
        <img
          class="self_refresh_doge"
          src="../../assets/refresh/refresh_.gif"
        />
      </template>
      <!-- 成功 -->
      <template #success>
        <img
          class="self_refresh_doge"
          src="../../assets/refresh/refresh_end.gif"
        />
      </template>
      <template v-if="hideUp">
        <slot></slot>
      </template>
      <template v-else>
        <van-list
          v-model="refresh.loading"
          :finished="refresh.finished"
          :finished-text="lang_['No more data']"
          :loading-text="lang_['loading_in']"
          @load="onLoad"
        >
          <slot></slot>
        </van-list>
      </template>

    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "self-refresh",
  props: {
    //是否在 加載數據
    loading: {
      default () {
        return false;
      }
    },
    // 加載完成
    finished: {
      default () {
        return false
      }
    },
    // 是否隱藏 上拉加載
    hideUp: {
      default () {
        return false;
      }
    }
  },
  model: {
    prop: 'loading',
    event: "change"
  },
  data () {
    return {
      refresh: {
        loading: false, // 上拉加載是否開啟
        finished: false, // 上拉加載 是否完成
        refreshing: false, // 是否開啟下拉刷新
      },
      //當前模式
      type: "down",
      lang_: {
        "No more data": "沒有更多數據了",
        "loading_in": "加载中,请稍后...",
      },
    }
  },
  watch: {
    loading () {
      // 觸發 刷新完成
      this.onFinished();
    }
  },
  methods: {
    // 下拉刷新
    onRefresh () {
      this.refresh.finished = false; // 開啟上拉
      this.refresh.loading = true; // 下拉開始刷新
      this.$emit('change', true); // 修改 加載狀態
      this.$emit('onRefresh', 'down'); // 觸發下拉刷新
      this.type = 'down'; // 修改狀態
    },
    // 上拉加載
    onLoad () {
      this.$emit('change', true); // 修改 加載狀態
      this.$emit('onRefresh', 'up'); // 觸發 上拉加載
      this.type = 'up'; // 修改狀態
    },
    // 加載完成
    onFinished () {
      // 下拉完成 才出發, true 表示正在加載
      if (!this.loading) {
        if (this.type == 'down') { // 下拉
          this.refresh.loading = false; // 繼續上拉加載
          this.refresh.refreshing = false; // 下拉刷新完成
        } else { // 上拉
          this.refresh.loading = false; // 繼續上拉加載
          if (this.finished) { // 監測 加載完成
            this.refresh.finished = true; // 完成 上拉加載
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.refresh-box {
  background-color: #f0f0f0;
}
</style>

---

使用方法

<selfRefesh
  v-model="loading"
  :finished="finished"
  @onRefresh="onRefresh"
>內容</selfRefesh>

 data () {
    return {
      loading: false, // 是否在加載
      finished: false,// 全部加載完成
    }
  },




 onRefresh (type) {
    if (type == 'down') {
      this.params.pageIndex = 0;
    } else {
      this.params.pageIndex += 10;
    }
    //請求
    axios(res => {
      if (res.success) {
        let data = res.data;
        if (type == 'down') {
          this.loading = false;
        } else {
          if (data.length > 0) {
            this.loading = false;
          } else {
            this.loading = false;
            this.finished = true;
          }
        }
      }
    }).catch(e => {
      if (type == 'down') {
        this.loading = false;
      } else {
        this.loading = false;
        this.finished = true;
      }
    })
  },