lit-infinite-loading v0.0.56

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/src/InfiniteLoading.js"></script>

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

<!-- In a Module -->
<script type="module">
  import '/node_modules/lit-infinite-loading/src/InfiniteLoading.js'
  // ...
</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.