vue 動畫抖動效果_Vue無限載入vueinfiniteloading

阿新 • • 發佈：2021-01-04

Vue無限載入vue-infinite-loading

在改造網站的時候，覺得分頁展示文章不是很友好感覺很蠢，其實早都想替換了，一開始嘗試使用iview 提供的Scroll 無限滾動真的是無力吐槽難用的很，載入時間必須長，否則頁面狂抖動。。。昨晚做計劃模組的時候無意間發現了一個 vue-infinite-loading 感覺蠻好用的在此記錄一下

前提

vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，請安裝vue-infinite-loading1.3版本

1.安裝

安裝很簡單只需要 npm install 一下即可

npm install vue-infinite-loading --save

2.引入vue-infinite-loading

直接在需要滾動載入的元件 vue 中 import 進去

import InfiniteLoading from "vue-infinite-loading" components: {  InfiniteLoading //元件  },

3.編寫模板

直接跟在可以滾動的 div 等後面當頁面到 distance處 臨界值，距離底部多少距離時觸發函式 infiniteHandler

<template>  <div>    <div v-for="(item, $index) in list" :key="$index">      <div>{{item}}div>    div>    <infinite-loading :distance="distance" @infinite="infiniteHandler">      <div slot="spinner">小弟拼命載入中...div>//載入中的文字  也可以直接使用spinner 配置不同的載入動畫，這裡是自定義 顯示文字      <div slot="no-more">已載入完畢!div>//載入完畢的文字      <div slot="no-results">暫無資料:(div>//沒有資料的文字    infinite-loading>  div>template>

4 觸發載入函式

以下是網上簡單的教程可以直接配合上面使用

<script>  import InfiniteLoading from 'vue-infinite-loading';  export default {    mounted() {     },    components: {      InfiniteLoading,//直接在元件中宣告     },    methods: {      infiniteHandler($state) {        console.log("觸發")        setTimeout(() => {             const temp = [];           if(this.list.length>80){            $state.complete(); //當沒有資料的時候 呼叫 complete            return;           }            for (let i = this.list.length + 1; i <= this.list.length + 10; i++) {                temp.push(i);              }             this.list = this.list.concat(temp);             $state.loaded();            }, 1000);       },     },    data() {      return {        distance:100,//臨界值，距離底部多少距離時觸發函式  infiniteHandler        list: [1,2,3,4,5,6,7,8,9,0],//測試資料       }     }   }</script>

5.vue-infinite-loading 屬性以及事件

5.1 屬性

on-infinite

這是一個回撥函式，當滾動到距離滾動父元素底部特定距離的時候，會被呼叫。通常，在資料載入完成後，你應該在這個函式中傳送

distance

這是滾動的臨界值。如果到滾動父元素的底部距離小於這個值，那麼on-infinite回撥函式就會被呼叫。

spinner

通過這個屬性，你可以選擇一個你最喜愛旋轉器作為載入動畫

bubbles //我使用的是這個
circles
default
spiral
waveDots

5.2 Event 事件

$InfiniteLoading:loaded

通常，你需要在資料載入後傳送這個事件，InfiniteLoading元件將隱藏載入動畫，並且準備下一次觸發。

InfiniteLoading:complete

當你傳送這個事件的時候，它會為使用者顯示一個沒有更多內容的提示。你可以利用 solt 來自定義需要顯示的內容。

6.正式使用

注意沒有資料的時候需要呼叫 complete 方法

  //滾動 出發事件  infiniteHandler($state) {   console.log("觸發");   setTimeout(() => {    this.page.pageNumber = this.page.pageNumber + 1;    postRequest("blogs/planExecuteRecord/page", this.page).then((res) => {     let plandetailList = res.data.data.content;     if (plandetailList != null && plandetailList.length > 0) {      this.plandetailList = this.plandetailList.concat(plandetailList);      $state.loaded();      } else {      $state.complete();      return;      }     });    }, 600);   },

 <infinite-loading   :distance="distance"    @infinite="infiniteHandler"    spinner="bubbles"  >      <div slot="no-more">暫無資料:(div> infinite-loading>