vue 动画 抖动效果_Vue无限加载vueinfiniteloading

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>

总结

本篇主要 介绍了 vue-infinite-loading 无限加载插件的使用，如何安装 如何引入 以及一下模板 和 属性 事件的介绍，最后提供了我正式使用的方式 以及效果图。。