{"id":13424092,"url":"https://github.com/mint-ui/mint-loadmore","last_synced_at":"2025-03-15T18:33:49.143Z","repository":{"id":57298146,"uuid":"58606839","full_name":"mint-ui/mint-loadmore","owner":"mint-ui","description":"A two-direction mobile load-more component for vue.js","archived":false,"fork":false,"pushed_at":"2016-10-28T15:08:14.000Z","size":62,"stargazers_count":317,"open_issues_count":12,"forks_count":104,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-11T21:34:26.358Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","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/mint-ui.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-05-12T04:13:10.000Z","updated_at":"2023-11-08T10:39:59.000Z","dependencies_parsed_at":"2022-09-06T04:20:37.450Z","dependency_job_id":null,"html_url":"https://github.com/mint-ui/mint-loadmore","commit_stats":null,"previous_names":["elemefe/vue-loadmore"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mint-ui%2Fmint-loadmore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mint-ui%2Fmint-loadmore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mint-ui%2Fmint-loadmore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mint-ui%2Fmint-loadmore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mint-ui","download_url":"https://codeload.github.com/mint-ui/mint-loadmore/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221601254,"owners_count":16850309,"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":[],"created_at":"2024-07-31T00:00:48.434Z","updated_at":"2024-10-26T23:30:13.774Z","avatar_url":"https://github.com/mint-ui.png","language":"Vue","readme":"# Overview\nvue-loadmore is a two-direction mobile pull-to-refresh component for vue.js.\n\n# Installation\n```bash\n$ npm install vue-loadmore\n```\n\n# Usage\nImport `vue-loadmore` to your project:\n```Javascript\n// ES6 mudule\nimport Loadmore from 'vue-loadmore';\n\n// CommonJS\nconst Loadmore = require('vue-loadmore').default;\n```\n\nRegister component:\n```Javascript\nVue.component('loadmore', Loadmore);\n```\n\nThen use it:\n```html\n\u003cloadmore :top-method=\"loadTop\" :bottom-method=\"loadBottom\" :bottom-all-loaded=\"allLoaded\"\u003e\n  ...\n\u003c/loadmore\u003e\n```\n\n# Example\n\n```html\n\u003cmt-loadmore :top-method=\"loadTop\" :bottom-method=\"loadBottom\" :bottom-all-loaded=\"allLoaded\" ref=\"loadmore\"\u003e\n  \u003cul\u003e\n    \u003cli v-for=\"item in list\"\u003e{{ item }}\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/mt-loadmore\u003e\n```\n\nTake upward direction for example: pull the component `topDistance` pixels away from the top and then release it, the function you appointed as `top-method` will run\n\n```javascript\nloadTop(id) {\n  ...// load more data\n  this.$refs.loadmore.onTopLoaded(id);\n}\n```\nAt the end of your `top-method`, don't forget to manually execute the `onTopLoaded` event so that `mint-loadmore` removes `topLoadingText`. Note that a parameter called `id` is passed to `loadTop` and `onTopLoaded`. This is because after the top data is loaded, some reposition work is performed inside a `mint-loadmore` instance, and `id` simply tells the component which instance should be repositioned. You don't need to do anything more than passing `id` to `onTopLoaded` just as shown above.\n\nFor downward direction, things are similar. To invoke `bottom-method`, just pull the component `bottomDistance` pixels away from the bottom and then release it\n\n```javascript\nloadBottom(id) {\n  ...// load more data\n  this.allLoaded = true;// if all data are loaded\n  this.$refs.loadmore.onBottomLoaded(id);\n}\n```\nThe only difference is that after all data are fetched, you can set `bottom-all-loaded` to `true` so that `bottom-method` will not run any more.\n\nThe ratio between the distance that your finger moves and the distance that the component actually scrolls can be defined using `distance-index`, whose default value is 2。\n\n## Custom HTML templates\n\nYou can customize the top and bottom DOM using an HTML template\n```html\n\u003cmt-loadmore :top-method=\"loadTop\" :top-status.sync=\"topStatus\"\u003e\n  \u003cul\u003e\n    \u003cli v-for=\"item in list\"\u003e{{ item }}\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cdiv slot=\"top\" class=\"mint-loadmore-top\"\u003e\n    \u003cspan v-show=\"topStatus !== 'loading'\" :class=\"{ 'rotate': topStatus === 'drop' }\"\u003e↓\u003c/span\u003e\n    \u003cspan v-show=\"topStatus === 'loading'\"\u003eLoading...\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/mt-loadmore\u003e\n```\nFor example, to customize the top DOM, you'll need to write your template with a `slot` attribute set to `top` and `class` set to `mint-loadmore-top`. When the component is scrolled, it will be in one of the three status below\n*  `pull`: if the component is being pulled yet not ready to drop (top distance is within the distance threshold defined by `topDistance`)\n*  `drop`: if the component is ready to drop\n*  `loading`: if `topMethod` is running\nEvery time the status changes, an event named `top-status-change` fires with a parameter indicating the current status of the component. So you can handle this change with a `handleTopChange` method just as the above example shows.\n\n## Configure texts in top and bottom DOM\nIf you decide not to customize HTML templates, you can configure the texts that comes with `loadmore`. Take the top DOM for example, corresponding to the three `top-status` states, configurable options are: `topPullText`, `topDropText` and `topLoadingText`. And `bottomPullText`, `bottomDropText` and `bottomLoadingText` are for the bottom DOM.\n\n## Auto fill\nUpon loaded, `loadmore` will automatically check if it is tall enough to fill its container. If not, `bottom-method` will run until its container is filled. Turn off `auto-fill` if you'd rather handle this manually.\n\n## API\n| option | description | type | acceptable values | default |\n|------|-------|---------|-------|--------|\n| autoFill | if `true`, `loadmore` will check and fill its container | Boolean | | true |\n| distanceIndex | the ratio between the distance of the finger moves and the component scrolls | Number | | 2 |\n| maxDistance | maximum distance(in pixel) the component can scroll. Can be disabled by setting it to 0 | Number | | 0 |\n| topPullText | top text when the component is being pulled down | String | | '下拉刷新' |\n| topDropText | top text when the component is ready to drop | String | | '释放更新' |\n| topLoadingText | top text while `topMethod` is running | String | | '加载中...' |\n| topDistance | distance threshold that triggers `topMethod`(in pixel) | Number | | 70 |\n| topMethod | upward load-more function | Function | | |\n| bottomPullText | bottom text when the component is being pulled up | String | | '上拉刷新' |\n| bottomDropText | bottom text when the component is ready to drop | String | | '释放更新' |\n| bottomLoadingText | bottom text while `bottomMethod` is running | String | | '加载中...' |\n| bottomDistance | distance threshold that triggers `bottomMethod`(in pixel) | Number | | 70 |\n| bottomMethod | downward load-more function | Function | | |\n| bottomAllLoaded | if `true`, `bottomMethod` can no longer be triggered | Boolean | | false |\n\n## Events\n| event name | description | parameters |\n|------|-------|---------|\n| top-status-change | the callback when the component's top status changes | current top status |\n| bottom-status-change | the callback when the component's bottom status changes | current bottom status |\n\n## Slot\n| name | description |\n|------|--------|\n| - | data list |\n| top | custom top HTML template |\n| bottom | custom bottom HTML template |\n\n# License\nMIT\n","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Vue","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmint-ui%2Fmint-loadmore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmint-ui%2Fmint-loadmore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmint-ui%2Fmint-loadmore/lists"}