lit-infinite-loading

Infinite loading component for lit-element.

installation

via npm:

npm i lit-infinite-loading

how to load

<!-- From CDN -->
<script async type="module" src="https://unpkg.com/lit-infinite-loading"></script>

<!-- From local installation -->
<script async type="module" src="/node_modules/lit-infinite-loading"></script>

<!-- In a Module -->
<script type="module">
  import '/node_modules/lit-infinite-loading'
  // ...
</script>

usage

render:

`<lit-infinite-loading class="infinite-loading" ?disabled=${false} direction="toup" @finite=${this.finite_cb}>
	${
		this.list_arr.map((item, index) => {
			return html`<div>${item}</div>`
		})
	}
</lit-infinite-loading>`

callback:

finite_cb(e) {
    const feedback = e.detail.feedback
    this.list_arr.unshift(1, 2, 3)
    return this.requestUpdate().then(() => {
        return feedback.success()
    })
}

css:

.infinite-loading{
	width: 200px;
	height: 200px;
	overflow-y: auto;
}

setting:

<lit-infinite-loading> exposes a set of custom properties for your customizing delight:

Property	Purpose	Default
`--disabled`	to disable the functionality	false
`--direction`	trigger the loading behavior from bottom to up or in opposite? 'todown' adn 'toup' are applicable	todown

event and feedback

There will be only one event finite which may be triggered after the scoll bar has been scrolled. You can acquire the feedback object via e.detail.feedback in the event listener. And then there are several methods of the feedback object:

method	description
`success`	notify the loading process has been successful
`complete`	notify the loading process has completely been ended
`fail`	notify the loading process has been failed

slot

There are several slots you can use.

slot	description
`default`	content or children of this component
`state-nomore`	indicate no more content can be loaded
`state-noresult`	indicate no content can be loaded at all
`state-error`	failed in loading
`state-loading`	indicate loading state
`state-idle`	indicate idle state
All the named slots will show their fallbacks if not been sloted.

browser compatibility

IE is not supported, please only use it in modern browsers.

zzzgit/lit-infinite-loading