Vue 3 的无限滚动组件 - vue-eternal-loading

Vue 3 的无限滚动组件 - vue-eternal-loading
插件名称 vue-eternal-loading
发布时间 2021年12月2日
插件作者 TS-PRO

一个无限滚动(无限加载)组件 Vue3,基于IntersectionObserver API。

安装和下载:

# Yarn
$ yarn add @ts-pro/vue-eternal-loading

# NPM
$ npm i @ts-pro/vue-eternal-loading

用法

1.在应用程序中添加Eternal Loading组件。

<vue-eternal-loading :load="load"></vue-eternal-loading>

2. 这个例子展示了如何在你的应用上实现无限滚动。

const URL = '/path/to/API';
const PAGE_SIZE = 5;
const App = {
  data() {
    return {
      page: 1,
      users: [],
    }
  },
  methods: {
    loadUsers(page) {
      return fetch( `${URL}?delay=1&per_page=${PAGE_SIZE}&page=${page}`)
        .then(res => res.json())
        .then(res => res.data);
    },
    load(action) {
      this.loadUsers(this.page).then((users) => {
        this.users.push(...users);
        this.page += 1;
        action.loaded(users.length, PAGE_SIZE);
      })
    }
  }
};
const app = Vue.createApp(App);
app.component('vue-eternal-loading', VueEternalLoading);
app.mount('#app');

3. 可用的组件道具。

load: {
  required: true,
  type: Function as PropType<
    (action: LoadAction, payload: LoadPayload) => void
  >,
},
isInitial: {
  required: false,
  type: Boolean,
  default: true,
},
position: {
  required: false,
  type: String as PropType<Position>,
  // top, left, right, bottom
  default: 'default',
},
container: {
  required: false,
  type: Object as PropType<HTMLElement | null>,
  default: null,
},
margin: {
  required: false,
  type: String,
  default: undefined,
},