vue-infinite-loading

Fixed

• querySelector bug for forceUseInfiniteWrapper property
• Correct PluginFunction type

Fixed

• Double trigger bug when init with a scrolled wrapper #228

Improvements

• Add missing install method declaration in the TypeScript definition file

Fixed

• Throttleer bug when using multiple instances with v-show #204

Improvements

• Attempt load condition checking logic

Fixed

• Global object and document not defined error in SSR #202

Fixed

• Keep TypeScript definition file sync with source code
• Throttle reset bug will trigger double infinite event when reseting plugin #189

Happy Programmer's Day!

This version contains some notable changes and a lot of new features, you may need to spend some time reading them, I believe these changes can help you build application more easily :)

Notable changes

• Deprecate the $InfiniteLoading:reset event, use identifier property instead, because it is not a elegant way that getting the instance and communicate via event. Since this verison, the InfiniteLoading component will be reset whenever the identifier property is changed, so you can change your reset logic like this:

<template>
  <!-- ... -->
  <infinite-loading :identifier="infiniteId"></infinite-loading>
  <!-- ... -->
</template>
<script>
export default {
  data() {
    return { identifier: +new Date() };
  },
  methods: {
    reset() {
      this.identifier += 1; // or any expression can change identifier value
    },
  },
};
</script>

New

• The scroll height will be save and restore automatically when the direction is set to top, it means we can create a top-direction infinite scroll list out of the box!
• Support configure default values of props, default contents of slots and default system settings via the plugin API, read more
• Add a new status named error to control message display when loading error, read more
• A full-new documentation website, powered by Vuepress

Improvements

• To avoid inherit styles when configure complex load message via slot special attr, read more
• Better logger system, only output error message in production

Improvements

• The forceUseInfiniteWrapper prop support to pass a CSS selector, contributed by @snowyu through #187
• Vulnerabilities of dependencies

Fixed

• Export bug in TypeScript definition file, contributed by @snowyu through #188

Improvements

• Improve throttle logic to ensure the trailing call.

Improvements

• Support passive event listener #173 , contributed by @patrickabkarian
• Use throttle instead of debounce #160 , contributed by @whdckszxxx
• Add banner into dist file when bundle in production #154

New

• Add TypeScript declaration file, contributed by @phil-scott-78

Fixed

• Scroll event listen error when using body as the scroll element #111 , contributed by @damienbeaufils

Improvements

• Add responsive support for the force-use-infinite-wrapper property #102
• Add name property for this component, contributed by @rquelen through #108
• Reduce duration time for the debounce feature
• Move spinners to it own component, contributed by @bartekupartek through #98

Fixed

• Scroll wrapper search bug if the wrapper element is body, contributed by @SerikDM in #100

Improvements

• Stop attempt load when this component is invisible #93

Fixed

• Replace template to render function for all spinners to prevent pre-compile warning from Runtime-only version of Vue.js #83

Goodbye, the space hero Cassini Huygens!

This version contains notable changes, so you may need spend some time to update your application through the list below. If you have any suggestion, please join the issues and discuss with us!

Thanks to all contributors and participants of the related issues to help this component become better:

@syn-zeta @DaveSanders @Akari1987 @PenAndPapers @rodwin @mcmillion @vbabenko @adamyarger @duyhung85 @JefferyHus @tengqingya @emkman @feinimoshu753 @jkiimm @zzmm1 @xuyukuan @vgladimir @jun9358 @vlahde

Notable changes

• Deprecate the on-infinite property, and recommend to use infinite event instead, #75 , doc:

<infinite-loading v-on:infinite="infiniteHandler"></infinite-loading>
<!-- or -->
<infinite-loading @infinite="infiniteHandler"></infinite-loading>

• Deprecate use $InfiniteLoading:loaded and $InfiniteLoading:complete event, and recommend to use the $state special event argument instead, #57 , doc:

...
methods: {
  infiniteHandler($state) {
    ajax('https://www.example.com/api/news')
      .then((res) => {
        if (res.data) {
          $state.loaded();
        } else {
          $state.complete();
        }
      })
  },
},
...

New

• Add force-use-infinite-wrapper attribute support to prevent be in a infinite loop, #55 :

<div infinite-wrapper> <!--this div will become the real scroll wrapper -->
  <div style="overflow: auto;">
    <infinite-loading force-use-infinite-wrapper="true"></infinite-loading>
  </div>
</div>

Improvements

• Upgrade to Webpack 3.x and optimize configurations for the babel, karma and eslint
• Optimize all unit tests
• Support hide any message through a blank slot #61
• Optimize the scroll event performance #49
• Move all functions to methods to support extends feature #64
• Improve the way to render spinners, and keep the bundle size to 19kb after in the above changes

Fixed

• onInfinite callback bug when using multiple infinite list with keep-alive feature #40

Fixed

• Distance calculate bug when using this plugin with table element #43 , contribute by syn-zeta

New

• Support custom scroll parent with infinite-wrapper attribute when you using 3rd-party scroll plugin like perfect-scrollbar, see usage, #44

Fixed

• Infinite trigger bug when using keep-alive feature #40

Fixed

• Improve the way to calculate distance to fix #36

Fixed

• Improve the way to calculate distance to fix #36