vue移動端下拉重新整理和上拉載入元件,體積小執行快

聽過千百首歌 發表於 2022-01-24
Vue

下面介紹一款vue移動端下拉重新整理和上拉載入元件,體積小執行快,使用起來很簡單。

一個Vue.js 的下拉重新整理和上拉載入元件。

通過提供簡單的api易於使用。與其他元件庫不同,它使用瀏覽器本身而不是js來作滾動容器,因此它的程式碼量更小,但不損失使用者體驗。

中文 | English

預覽

線上demo

也可以掃描以下二維碼訪問演示:

<img src="https://user-images.githubusercontent.com/20060839/145163261-02025f86-ac87-4016-859f-15677a6d3cf7.png" width="220" height="220" >

安裝 & 使用

安裝 npm 包

# npm
npm install vuejs-loadmore --save

全域性匯入

import Vue from 'vue';
import VueLoadmore from 'vuejs-loadmore';

Vue.use(VueLoadmore);

國際化支援

支援中文 zh-CN 和英文 en-US, 預設為 zh-CN。

import VueLoadmore from 'vuejs-loadmore';

Vue.use(VueLoadmore, {
  lang: 'en-US'
})

你也可以使用 locale.use() 指定語言。

import VueLoadmore, { locale } from 'vuejs-loadmore';

Vue.use(VueLoadmore);
locale.use('en-US');

用法

基礎用法

<vue-loadmore 
  :on-refresh="onRefresh" 
  :on-loadmore="onLoad"
  :finished="finished">
  <div v-for="(item, i) of list" :key="i"></div>
</vue-loadmore>

on-refreshon-loadmore 會在下拉重新整理或滾動到底部時觸發,需要在處理完資料請求後執行回撥函式 done()

如果你不需要重新整理,只需要不繫結on-refresh

當資料請求完成後,你可以將finished的資料改為true,這樣就會顯示沒有更多了

export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      finished: false
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    onRefresh(done) {
      this.list = [];
      this.page = 1;
      this.finished = false;
      this.fetch();

      done();
    },

    onLoad(done) {
      if (this.page <= 10) {
        this.fetch();
      } else {
        // all data loaded
        this.finished = true;
      }
      done();
    },

    fetch() {
      for (let i = 0; i < this.pageSize; i++) {
        this.list.push(this.list.length + 1);
      }
      this.page++;
    }
  },
}

錯誤提示

<vue-loadmore 
  :on-loadmore="onLoad"
  :finished="finished"
  :error.sync="error">
  <div v-for="(item, i) of list" :key="i"></div>
</vue-loadmore>
export default {
  data() {
    return {
      list: [],
      finished: false,
      error: false,
    };
  },
  methods: {
    onLoad() {
      fetchSomeThing().catch(() => {
        this.error = true;
      });
    },
  },
};

API

Props

AttributeDescriptionTypeDefault
on-refresh頂部下拉觸發function-
pulling-text下拉顯示文字string下拉重新整理
loosing-text釋放顯示文字string釋放重新整理
loading-text正在重新整理顯示文字string正在重新整理
success-text重新整理完成顯示文字string重新整理完成
show-success-text是否顯示success-textbooleantrue
pull-distance觸發正在重新整理狀態的距離_number \string_50
head-height正在重新整理顯示區域的高度_number \string_50
animation-duration下拉重新整理動畫持續時間_number \string_200
on-loadmore滾動到底部觸發function-
immediate-check是否在mounted之後立即檢查booleantrue
load-offset當滾動條到底部的距離小於 load-offset 時,會發出 on-loadmore_number \string_50
finished資料是否載入完畢,改變為true,則會顯示finished-textbooleanfalse
error資料是否載入錯誤,on-loadmore只有在點選錯誤文字時才會觸發,需要sync修飾符booleanfalse
loading-text滾動到底部正在載入顯示文字string正在載入
finished-text滾動到底部載入完畢的顯示文字string沒有更多了
error-text載入錯誤顯示文字string請求失敗,點選重新載入

方法

使用 ref 獲取 List 例項並呼叫例項方法。

NameDescription
checkScroll檢查當前的滾動位置,若已滾動至底部,則會觸發 on-loadmore

例子

檢視demo以快速瞭解如何使用此包。

git clone [email protected]:staticdeng/vuejs-loadmore.git
yarn install
yarn example:dev