{"id":18051324,"url":"https://github.com/eightfeet/vue-scrolllist","last_synced_at":"2025-04-10T16:51:36.267Z","repository":{"id":57396597,"uuid":"68561846","full_name":"eightfeet/vue-scrolllist","owner":"eightfeet","description":"Vue 手机端下拉刷新（翻页）组件","archived":false,"fork":false,"pushed_at":"2016-09-19T06:07:04.000Z","size":27,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-04T18:03:33.031Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eightfeet.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":"2016-09-19T02:27:37.000Z","updated_at":"2017-05-16T03:04:21.000Z","dependencies_parsed_at":"2022-08-27T14:21:23.793Z","dependency_job_id":null,"html_url":"https://github.com/eightfeet/vue-scrolllist","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightfeet%2Fvue-scrolllist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightfeet%2Fvue-scrolllist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightfeet%2Fvue-scrolllist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightfeet%2Fvue-scrolllist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eightfeet","download_url":"https://codeload.github.com/eightfeet/vue-scrolllist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248256026,"owners_count":21073443,"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-10-30T22:28:30.141Z","updated_at":"2025-04-10T16:51:36.231Z","avatar_url":"https://github.com/eightfeet.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"vue-scrolllist\n==============\n\nVue 手机端下拉刷新（翻页）组件，页面下拉 -\u003e 触底 -\u003e 请求Api -\u003e 刷新视图。建议es6语法；\n当翻页到最后一页时滚动停止请求接口\n\n### 一、安装\ncd to you project\n```ssh\nnpm install vue-scrolllist\n```\n### 二、使用\n\n#### example.vue ####\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cscrolllist :scrollaction=\"getProducts\" :currentpage=\"currentpage\" :pagesize=\"size\" :totalsize=\"totalElements\"\u003e\n      \u003cdiv slot=\"list\"\u003e\n        \u003cdiv v-for=\"el in productslist\"\u003e\n            bala bala ...\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/scrolllist\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n```js\n\u003cscript\u003e\n// 引入组件\nimport scrolllist from 'vue-scrolllist';\nmodule.exports = {\n  methods: {\n    // 翻页方法\n    getProducts () {\n      // 请务必Promise\n      return new Promise((resolve, reject) =\u003e {\n        ApiRequest.post({\n          // 每页条数\n          size: this.size, \n          // 当前页\n          page: this.currentpage \n        }).then((res) =\u003e {\n          // success \n          // 接口数据赋值\n          this.productslist = [...this.productslist, ...res.data.content];\n          // 返回总共条数\n          this.totalElements = res.data.totalElements;\n          // 每次请求当前＋1，初始化下一页的页码\n          this.currentpage = res.data.number + 1;\n          // Promise resolve\n          resolve();\n        }, (res) =\u003e {\n          // error \n        });\n      });\n    }\n  },\n  data () {\n    return {\n      productslist: [],\n      // 定义每页显示多少条\n      size: 3,\n      // 初始化起始页面，视接口返回第一页的值而定\n      currentpage: 0,\n      // 总共返回数据，用于计算是否到达结果页\n      totalElements: null\n    };\n  },\n  ready () {\n    // 首次获取产品\n    this.getProducts();\n  },\n  components: {\n    // 初始化组件\n    scrolllist\n  }\n};\n\u003c/script\u003e\n```\n\n### 三、参数说明\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003e参数\u003c/th\u003e\n\t\t\u003cth\u003e介绍\u003c/th\u003e\n\t\t\u003cth\u003e类型\u003c/th\u003e\n\t\t\u003cth\u003e备注\u003c/th\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n    \t\t\u003ctd\u003escrollaction\u003c/td\u003e\n\t\t\u003ctd\u003e请求接口，翻页方法\u003c/td\u003e\n\t\t\u003ctd\u003efunction\u003c/td\u003e\n\t\t\u003ctd\u003e必填,请务必 return Promise 对象\u003c/td\u003e\n  \t\u003c/tr\u003e\n  \t\u003ctr\u003e\n    \t\t\u003ctd\u003ecurrentpage\u003c/td\u003e\n\t\t\u003ctd\u003e当前页面\u003c/td\u003e\n\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\u003ctd\u003e必填,提供当前页面值给组件计算\u003c/td\u003e\n  \t\u003c/tr\u003e\n  \t\u003ctr\u003e\n    \t\t\u003ctd\u003epagesize\u003c/td\u003e\n\t\t\u003ctd\u003e每页显示条数\u003c/td\u003e\n\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\u003ctd\u003e必填,提供当前页面值给组件计算\u003c/td\u003e\n  \t\u003c/tr\u003e\n\t\u003ctr\u003e\n    \t\t\u003ctd\u003etotalsize\u003c/td\u003e\n\t\t\u003ctd\u003e接口数据条数\u003c/td\u003e\n\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\u003ctd\u003e必填,提供当前页面值给组件计算\u003c/td\u003e\n  \t\u003c/tr\u003e\n  \t\u003ctr\u003e\n    \t\t\u003ctd\u003escrollname\u003c/td\u003e\n\t\t\u003ctd\u003e滚动列表名称\u003c/td\u003e\n\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\u003ctd\u003e选填,如果一个页面中有多个滚动条时要通过给组建命名加以区分\u003c/td\u003e\n  \t\u003c/tr\u003e\n\u003c/table\u003e\n\n### PS：\n==============\n父级dom位置决定组件位置\n\n一个页面用多个滚动插件时要记得给插件命名\n```html\n\u003cscrolllist scrollname=\"scrollA\" ... \u003e\n\u003c/scrolllist\u003e\n\u003cscrolllist scrollname=\"scrollB\" ... \u003e\n\u003c/scrolllist\u003e\n```\n\n![](./ex.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feightfeet%2Fvue-scrolllist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feightfeet%2Fvue-scrolllist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feightfeet%2Fvue-scrolllist/lists"}