{"id":19057415,"url":"https://github.com/femessage/data-list","last_synced_at":"2025-02-22T01:41:23.321Z","repository":{"id":56378188,"uuid":"164104253","full_name":"FEMessage/data-list","owner":"FEMessage","description":"📜Load more list items easily","archived":false,"fork":false,"pushed_at":"2020-11-11T10:11:59.000Z","size":3978,"stargazers_count":15,"open_issues_count":1,"forks_count":11,"subscribers_count":3,"default_branch":"dev","last_synced_at":"2025-02-04T04:44:14.695Z","etag":null,"topics":["list","load-more"],"latest_commit_sha":null,"homepage":"https://femessage.github.io/data-list/","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/FEMessage.png","metadata":{"files":{"readme":"README-zh.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":"2019-01-04T12:21:46.000Z","updated_at":"2024-08-09T06:15:19.000Z","dependencies_parsed_at":"2022-08-15T17:40:24.686Z","dependency_job_id":null,"html_url":"https://github.com/FEMessage/data-list","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fdata-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fdata-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fdata-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fdata-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FEMessage","download_url":"https://codeload.github.com/FEMessage/data-list/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240113944,"owners_count":19749829,"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":["list","load-more"],"created_at":"2024-11-08T23:57:03.263Z","updated_at":"2025-02-22T01:41:23.285Z","avatar_url":"https://github.com/FEMessage.png","language":"Vue","readme":"# data-list\n\n[![Build Status](https://badgen.net/travis/FEMessage/data-list/master)](https://travis-ci.com/FEMessage/data-list)\n[![NPM Download](https://badgen.net/npm/dm/@femessage/data-list)](https://www.npmjs.com/package/@femessage/data-list)\n[![NPM Version](https://badgen.net/npm/v/@femessage/data-list)](https://www.npmjs.com/package/@femessage/data-list)\n[![NPM License](https://badgen.net/npm/license/@femessage/data-list)](https://github.com/FEMessage/data-list/blob/master/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/FEMessage/data-list/pulls)\n[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)\n\n更好用的滚动加载更多列表组件\n\n![](https://i.loli.net/2019/11/15/H2uRgN8fsp4YDkW.gif)\n\n[English](./README-en.md)\n\n## Table of Contents\n\n- [Introduction](#introduction)\n  - [What is `data-list`](#what-is-data-list)\n  - [Why](#why)\n- [Features](#features)\n- [Links](#links)\n- [Pre Install](#pre-install)\n- [Quick Start](#quick-start)\n- [Example](#example)\n  - [Basic](#basic)\n  - [Slot Content](#slot-content)\n  - [Reset](#reset)\n- [Contributing](#contributing)\n- [Contributors](#contributors)\n- [License](#license)\n\n## Introduction\n\n### What is `data-list`\n\n`data-list`组件 是基于 [v-infinite-loading](https://peachscript.github.io/vue-infinite-loading/) 封装的列表渲染组件。只需要配置 url 和 datahPath 即可进行数据处理，提供无限滚动，滑动加载更多数据等功能。\n\n### Why\n\n日常需要面对大量列表渲染的场景，通常这些列表的数据处理逻辑是相似或重复的。为避免写重复代码，data-list 因此诞生了。\n\n## Features\n\n- 传入`url`即会请求获取数据\n- 自带下拉加载更多，分页数据处理\n- 自动判断当前第几页，是否已到尾页、并且停止数据的加载\n- 支持获取不到数据、没有更多数据、请求错误等场景的提示语（可自定义）\n- 可以保存列表滚动状态，访问详情页后返回或页面刷新，能恢复之前的滚动位置\n\n[⬆ Back to Top](#table-of-contents)\n\n## Links\n\n- [docs](https://FEMessage.github.io/data-list/)\n\n[⬆ Back to Top](#table-of-contents)\n\n## Pre Install\n\n先确保你已经正确安装了`axios`\n\n```sh\nyarn add axios\n```\n\n然后在全局注册`axios`\n\n```js\nimport Vue from 'vue'\nimport axios from 'axios'\nVue.prototype.$axios = axios\n```\n\n[⬆ Back to Top](#table-of-contents)\n\n## Quick start\n\n```sh\n# Step1 安装\nyarn add @femessage/data-list\n```\n\n```vue\n// Step2 在需要渲染列表的 .vue 文件中\n\u003ctemplate\u003e\n  \u003cdata-list ref=\"dataList\" :url=\"url\"\u003e\n    \u003cul slot-scope=\"props\"\u003e\n      \u003cli v-for=\"(item, index) in props.list\" :key=\"index\"\u003e\n        {{ item.name }}\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/data-list\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport DataList from '@femessage/data-list'\nexport default {\n  name: 'data-list',\n  components: {DataList},\n  data() {\n    return {\n      url:\n        'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/data-list'\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n[⬆ Back to Top](#table-of-contents)\n\n## Example\n\n### Basic\n\n![](https://i.loli.net/2019/11/15/etjM5F3Z2uhk8J6.gif)\n\n### Slot Content\n\n![](https://i.loli.net/2019/11/15/7t5wiNqugCe4ohW.gif)\n\n### Reset\n\n![](https://i.loli.net/2019/11/15/w3mnFU6oXBpLsI8.gif)\n\n[⬆ Back to Top](#table-of-contents)\n\n## Contributing\n\nFor those who are interested in contributing to this project, such as:\n\n- report a bug\n- request new feature\n- fix a bug\n- implement a new feature\n\nPlease refer to our [contributing guide](https://github.com/FEMessage/.github/blob/master/CONTRIBUTING.md).\n\n[⬆ Back to Top](#table-of-contents)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/listars\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/20613509?v=4\" width=\"100px;\" alt=\"listars\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003elistars\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/data-list/commits?author=listars\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/FEMessage/data-list/issues?q=author%3Alistars\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/FEMessage/data-list/commits?author=listars\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-listars\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"http://levy.work\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/9384365?v=4\" width=\"100px;\" alt=\"levy\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003elevy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#review-levy9527\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#ideas-levy9527\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://evila.me\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19513289?v=4\" width=\"100px;\" alt=\"EVILLT\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEVILLT\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-evillt\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"http://67.216.223.155/resume/\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/26338853?v=4\" width=\"100px;\" alt=\"OuZuYu\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOuZuYu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/data-list/issues?q=author%3AOuZuYu\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://donaldshen.github.io/portfolio\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19591950?v=4\" width=\"100px;\" alt=\"Donald Shen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDonald Shen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/data-list/issues?q=author%3Adonaldshen\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#question-donaldshen\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[MIT](./LICENSE)\n\n[⬆ Back to Top](#table-of-contents)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffemessage%2Fdata-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffemessage%2Fdata-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffemessage%2Fdata-list/lists"}