Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mgnstudio7/stenciljs-virtual-scroll
Virtual Scroll Web Component with DIFFERENT element height
https://github.com/mgnstudio7/stenciljs-virtual-scroll
angular angular5 angularx ionic javascript react react-native scroll stencil stenciljs typescript virtual-scroll web-components webcomponents
Last synced: 2 months ago
JSON representation
Virtual Scroll Web Component with DIFFERENT element height
- Host: GitHub
- URL: https://github.com/mgnstudio7/stenciljs-virtual-scroll
- Owner: mgnstudio7
- License: mit
- Created: 2018-01-12T12:17:19.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-28T08:03:23.000Z (over 6 years ago)
- Last Synced: 2024-11-07T14:54:17.209Z (3 months ago)
- Topics: angular, angular5, angularx, ionic, javascript, react, react-native, scroll, stencil, stenciljs, typescript, virtual-scroll, web-components, webcomponents
- Language: TypeScript
- Homepage:
- Size: 377 KB
- Stars: 17
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Stenciljs-virtual-scroll
This is a project for building a standalone Virtual Scroll Web Component using Stencil.
Project contain collection of two components:
**1.** virtual-scroll (VirtualScrollWebComponent).
This component render subset of elements with **DIFFERENT** height, required to fill the viewport
**2.** fetch-helper (FetchHelperWebComponent)
This component show you, how to use virtual scroll without framework.
## Get Started with Angular5 (Ionic 3)
**Step 1.** Install Stenciljs-virtual-scroll
```sh
npm install stenciljs-virtual-scroll --save
```
**Step 2.** Import virtual scroll component into your angular app module
```ts
....
import 'stenciljs-virtual-scroll/dist/virtualscroll';
....
```
**Step 3.** Import CUSTOM_ELEMENTS_SCHEMA into your angular app module
```ts
....
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
....
@NgModule({
...
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
....
})
export class AppModule { }
```
**Step 4.** Copying the Components
For Angular2+
During the build, the components need to be copied to the build output directory. The easiest way to do this is to modify include the collection in the assets array of the .angular-cli.json file.
```json
"assets": [
"assets",
"favicon.ico",
{ "glob": "**/*", "input": "../node_modules/stenciljs-virtual-scroll/dist/virtualscroll", "output": "./virtualscroll" }
]
```
For Ionic2+
You must use app-script to copy web component files in www directory
1. Add in package.json
```json
"config": {
"ionic_copy": "./config/copy.config.js"
}
```
2. Create config/copy.config.js and put in
```ts
// this is a custom dictionary to make it easy to extend/override
// provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts'
// then provide an object with a `src` array of globs and a `dest` string
module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
},
copyIndexContent: {
src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
dest: '{{WWW}}'
},
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
copyPolyfills: {
src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`],
dest: '{{BUILD}}'
},
copySwToolbox: {
src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
dest: '{{BUILD}}'
},
copyVirtualScrollCore: {
src: ['{{ROOT}}/node_modules/stenciljs-virtual-scroll/dist/virtualscroll/**/*'],
dest: '{{BUILD}}/virtualscroll'
},
copyVirtualScroll: {
src: ['{{ROOT}}/node_modules/stenciljs-virtual-scroll/dist/virtualscroll.js'],
dest: '{{BUILD}}'
}
}
```
before copyVirtualScrollCore property set standart app-script copy.config properties (if you are modify self config or my version is outdated, get only last 2 properties and put in your)
3. And register component in app module
```ts
....
import 'stenciljs-virtual-scroll/dist/virtualscroll';
....
```
4. rebuild
# Usage
```html
....
{{item.index}}
{{item.title}}
loading...
....
```
OR without selector
```html
....
{{item.index}}
loading...
....
```
```ts
....
export class ExamplePage {
@ViewChild('scroll') vscroll: ElementRef;
private virtual: Array = [];
....
initVScroll() {
this.vscroll.nativeElement.addEventListener('update', (event) => {
this.virtual = event.detail;
//this.changeDetector.detectChanges(); if need
});
this.vscroll.nativeElement.addEventListener('toBottom', (event) => {
this.http.get('https://jsonplaceholder.typicode.com/photos', {}).map(res => res.json()).subscribe(data => {
this.vscroll.nativeElement.list = this.vscroll.nativeElement.list.concat(data.splice(0, 50))
if (this.vscroll.nativeElement.list.length > 200) {
this.vscroll.nativeElement.setInfinateFinally();
}
else {
this.vscroll.nativeElement.setInfinateOn();
}
//this.changeDetector.detectChanges(); if need
});
});
this.http.get('https://jsonplaceholder.typicode.com/photos', {}).map(res => res.json()).subscribe(data => {
this.vscroll.nativeElement.list = data.splice(0, 50);
//this.changeDetector.detectChanges(); if need
});
}
}
....
```
```css
virtual-scroll {
display: block;
}
```
If you need to use it without framework, watch fetch-helper component.
# Ionic 3 example
[stenciljs ionic-virtual-scroll-example](https://github.com/mgnstudio7/ionic-virtual-scroll-example)
# API
**Selector**
In this attribute you must set selector of scrollable container (ionic application example).
If attribute is empty, component use inner scroll container.
**bottom-offset**
offset of elements to fired toBottom() event
**toBottom()**
this event is fired if scroll came to the end
**update()**
this event is fired every time when virtual scroll data is changed
**setInfinateOn()**
this method must call every time when lazy load data is finish.
If this method do not call. toBottom event never fired again
**setInfinateFinally()**
this method must call if lazy load finally and never fired toBottom() evend, and hide loader element
**clear()**
this method clear all need params of component, but not list
```ts
....
this.vscroll.nativeElement.list = [];
this.vscroll.nativeElement.clear();
//this.changeDetector.detectChanges(); if need
....
```
**scrollToNode()**
set list item index, duration, offset
```ts
....
this.vscroll.nativeElement.scrollToNode(25, 1000, -50);
....
```
**forceUpdateComponent()**
this method re-checks all dimensions, add the missing ones and force update component
```ts
....
this.vscroll.nativeElement.forceUpdateComponent();
....
```
**virtual-ratio**
add nodes after last and before first viewed nodes in viewport.
# WARN
nodes(list items) index must be different. Component set different index but if you change it, or if your list contain dublicates there may be problems.