{"id":13441937,"url":"https://github.com/egoist/vue-mugen-scroll","last_synced_at":"2025-10-07T15:48:48.258Z","repository":{"id":12325510,"uuid":"71581500","full_name":"egoist/vue-mugen-scroll","owner":"egoist","description":"Infinite scroll component for Vue.js 2","archived":false,"fork":false,"pushed_at":"2022-12-07T01:04:46.000Z","size":1808,"stargazers_count":539,"open_issues_count":30,"forks_count":68,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-16T05:03:33.254Z","etag":null,"topics":["infinite-scroll","scroll","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/egoist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-21T16:20:21.000Z","updated_at":"2025-04-01T10:47:34.000Z","dependencies_parsed_at":"2023-01-11T20:18:55.964Z","dependency_job_id":null,"html_url":"https://github.com/egoist/vue-mugen-scroll","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-mugen-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-mugen-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-mugen-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Fvue-mugen-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egoist","download_url":"https://codeload.github.com/egoist/vue-mugen-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471061,"owners_count":22076585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["infinite-scroll","scroll","vue"],"created_at":"2024-07-31T03:01:39.859Z","updated_at":"2025-10-07T15:48:48.122Z","avatar_url":"https://github.com/egoist.png","language":"JavaScript","funding_links":[],"categories":["HarmonyOS","JavaScript","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Windows Manager","Libraries \u0026 Plugins","无限滚动","UI Components","Infinite Scroll"],"readme":"# vue-mugen-scroll [![NPM version](https://img.shields.io/npm/v/vue-mugen-scroll.svg?style=flat-square)](https://npmjs.com/package/vue-mugen-scroll) [![NPM downloads](https://img.shields.io/npm/dm/vue-mugen-scroll.svg?style=flat-square)](https://npmjs.com/package/vue-mugen-scroll) [![Build Status](https://img.shields.io/circleci/project/egoist/vue-mugen-scroll/master.svg?style=flat-square)](https://circleci.com/gh/egoist/vue-mugen-scroll)\n\n**むげん [mugen]** means Infinity in English.\n\n## Features\n\n- Small, only weighs 2kb\n- Insanely easy to use, it's just a component with a couple props\n\n## Install\n\n```bash\n$ npm install --save vue-mugen-scroll\n```\n\nCDN: https://unpkg.com/vue-mugen-scroll/dist/\n\nDemo: [JSFiddle](https://jsfiddle.net/jericopulvera/wq07brjs/17/)\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv class=\"list\"\u003eyour list of items\u003c/div\u003e\n    \u003c!-- add the component right after your list --\u003e\n    \u003cmugen-scroll :handler=\"fetchData\" :should-handle=\"!loading\"\u003e\n      loading...\n    \u003c/mugen-scroll\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import MugenScroll from 'vue-mugen-scroll'\n  export default {\n    data() {\n      // do not run handler when it's loading\n      return {loading: false}\n    },\n    methods: {\n      fetchData() {\n        this.loading = true\n        // ... the code you wanna run to fetch data\n        this.loading = false\n      }\n    },\n    components: {MugenScroll}\n  }\n\u003c/script\u003e\n```\n\n## API\n\n### props\n\n#### handler\n\nType: `function`\u003cbr\u003e\nRequired: `true`\n\nThe handler function to run after you scroll to the bottom of the list. It will also be invoked on component mounted and the `mugen-scroll` component is visible in viewport.\n\n#### handleOnMount\n\nType: `boolean`\u003cbr\u003e\nDefault: `true`\n\nInvoke the handler function on component mounted.\n\n#### shouldHandle\n\nType: `boolean`\u003cbr\u003e\nDefault: `true`\n\nAdd an additional condition to check if it should invoke the handler function, for example you don't want it to be invoked again as it's loading.\n\n#### threshold\n\nType: `number`\u003cbr\u003e\nDefault: `0`\n\nSet the ratio of the `\u003cmugen-scroll\u003e`'s height and width that needs to be visible for it to be considered in viewport. This defaults to 0, meaning any amount. A threshold of 0.5 or 1 will require that half or all, respectively, of the element's height and width need to be visible. threshold must be a number between 0 and 1\n\n#### scrollContainer\n\nType: `string`\n\nIf the container of your list is scrollable, you can specific the reference ID of the container, so that we can detect the `scroll` event of this element instead of `window`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"wrap\"\n    \u003c!-- the container is scrollable here --\u003e\n    style=\"height: 200px; overflow: auto;\"\n    \u003c!-- add the ref --\u003e\n    ref=\"wrap\"\u003e\n    \u003cdiv class=\"list\"\u003e\u003c!-- your list --\u003e\u003c/div\u003e\n    \u003cmugen-scroll\n      \u003c!-- pass the ref id --\u003e\n      scroll-container=\"wrap\"\u003e\n      Loading...\n    \u003c/mugen-scroll\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Development\n\nYou can run the example with [vbuild](https://github.com/egoist/vbuild)\n\n```bash\ngit clone https://github.com/egoist/vue-mugen-scroll.git\ncd vue-mugen-scroll\nyarn\nyarn example\n```\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## License\n\n[MIT](https://egoist.mit-license.org/) © [EGOIST](https://github.com/egoist)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-mugen-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegoist%2Fvue-mugen-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Fvue-mugen-scroll/lists"}