{"id":13593617,"url":"https://github.com/yuanfux/virtual-block","last_synced_at":"2026-01-18T06:39:22.140Z","repository":{"id":57143726,"uuid":"130627981","full_name":"yuanfux/virtual-block","owner":"yuanfux","description":"🌈vue-virtual-block render what's visible","archived":false,"fork":false,"pushed_at":"2018-06-17T03:38:07.000Z","size":308,"stargazers_count":44,"open_issues_count":1,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-25T22:27:16.027Z","etag":null,"topics":["virtual-list","virtualscroll","vue"],"latest_commit_sha":null,"homepage":"https://yuanfux.github.io/virtual-block/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuanfux.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-23T02:13:55.000Z","updated_at":"2025-01-10T08:53:38.000Z","dependencies_parsed_at":"2022-09-06T00:11:10.291Z","dependency_job_id":null,"html_url":"https://github.com/yuanfux/virtual-block","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yuanfux/virtual-block","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanfux%2Fvirtual-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanfux%2Fvirtual-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanfux%2Fvirtual-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanfux%2Fvirtual-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuanfux","download_url":"https://codeload.github.com/yuanfux/virtual-block/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanfux%2Fvirtual-block/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28531997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["virtual-list","virtualscroll","vue"],"created_at":"2024-08-01T16:01:22.250Z","updated_at":"2026-01-18T06:39:22.110Z","avatar_url":"https://github.com/yuanfux.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# virtual-block\n[![npm version](https://badge.fury.io/js/virtual-block.svg)](https://badge.fury.io/js/virtual-block)\n\n\u003e 🌈Render what's visible\n\n[Demo](https://yuanfux.github.io/virtual-block/)\n\n## Install\n```\nnpm i virtual-block\n```\n\n## Import\n```javascript\nimport Vue from 'vue'\nimport VirtualBlock from 'virtual-block/dist'\nVue.use(VirtualBlock)\n```\n\n## Usage\n\n### Page Mode\n```html\n\u003cVirtualBlock :data=\"blocks\"\u003e\n    \u003ctemplate slot-scope=\"{data}\"\u003e\n        \u003c!-- self defined slots --\u003e\n    \u003c/template\u003e\n\u003c/VirtualBlock\u003e\n```\n\n### Container Mode\n```html \n\u003cVirtualBlock :height=\"300\" :pageMode=\"false\" :data=\"blocks\"\u003e\n    \u003ctemplate slot-scope=\"{data}\"\u003e\n        \u003c!-- self defined slots --\u003e\n    \u003c/template\u003e\n\u003c/VirtualBlock\u003e\n```\n\n### Fixed Block Height\n```html\n\u003cVirtualBlock :height=\"300\" :pageMode=\"false\" :fixedBlockHeight=\"50\" :data=\"blocks\"\u003e\n    \u003ctemplate slot-scope=\"{data}\"\u003e\n        \u003c!-- self defined slots --\u003e\n    \u003c/template\u003e\n\u003c/VirtualBlock\u003e\n```\n\n### Unique virtual block\n```html\n\u003cVirtualBlock :height=\"300\" :pageMode=\"false\" :data=\"blocks\"\u003e\n    \u003ctemplate slot-scope=\"{data}\"\u003e\n        \u003ctemplate v-if=\"data.id === 0\"\u003e\n            \u003c!-- virtual block slot when id is 0 --\u003e\n        \u003c/template\u003e\n        \u003ctemplate v-if=\"data.id === 1\"\u003e\n            \u003c!-- virtual block slot when id is 1 --\u003e\n        \u003c/template\u003e\n        \u003ctemplate v-else\u003e\n            \u003c!-- other virtual block slots --\u003e\n        \u003c/template\u003e\n    \u003c/template\u003e\n\u003c/VirtualBlock\u003e\n```\n\n## Props\nName | Type | Default | Description\n--- | --- | --- | ---\n`data` | `Array\u003cDataObject\u003e` | - | **Required**. An Array of Object used as the source data.\n`height` | `Number` | - | **Required when `pageMode` is `false`**. The height of the virtual block container.\n`fixedBlockHeight` | `Number` | - | **Optional**. Specify this prop will assume every block has the same height value and the `height` keys in `data object` will be ignored. Note use `fixedBlockHeight` will improve the performance.\n`pageMode` | `Boolean` | `true` | **Optional**. `true` assumes the scroller will be on the `window`. `false` assumes the scroller will be on the `virtual block container`.\n\n## DataObject\nName | Type | Default | Description\n--- | --- | --- | ---\n`id` | String/Number | - | **Required**. Unique key for each virtual block.\n`height` | Number | - | **Required when prop `fixedBlockHeight` is `not` specified**. The height of each virtual block.\n\n## License\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanfux%2Fvirtual-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuanfux%2Fvirtual-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanfux%2Fvirtual-block/lists"}