{"id":22830896,"url":"https://github.com/mantoufan/mtfscrolllist","last_synced_at":"2025-04-23T19:14:26.420Z","repository":{"id":57304614,"uuid":"326417856","full_name":"mantoufan/mtfScrollList","owner":"mantoufan","description":"MTF滚动列表插件，支持虚拟化无限滚动，上拉到顶，下拉到底加载更多，下拉刷新。可在原生JS、React和Vue（未来）中使用","archived":false,"fork":false,"pushed_at":"2022-08-07T01:54:58.000Z","size":441,"stargazers_count":36,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-09T19:39:36.145Z","etag":null,"topics":["react-virtualized","virtualized-scroll","virtualizedlist","yzhan1kb"],"latest_commit_sha":null,"homepage":"https://mantoufan.github.io/mtfScrollList/mtfscrolllist/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mantoufan.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":"2021-01-03T13:49:53.000Z","updated_at":"2024-03-23T10:02:43.000Z","dependencies_parsed_at":"2022-09-09T04:50:59.896Z","dependency_job_id":null,"html_url":"https://github.com/mantoufan/mtfScrollList","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/mantoufan%2FmtfScrollList","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FmtfScrollList/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FmtfScrollList/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FmtfScrollList/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mantoufan","download_url":"https://codeload.github.com/mantoufan/mtfScrollList/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229445635,"owners_count":18074161,"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":["react-virtualized","virtualized-scroll","virtualizedlist","yzhan1kb"],"created_at":"2024-12-12T20:15:55.148Z","updated_at":"2024-12-12T20:15:55.734Z","avatar_url":"https://github.com/mantoufan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mtfScrollList\nMTF滚动列表插件，支持虚拟化无限滚动，上拉到顶，下拉到底加载更多，下拉刷新。可在原生JS、React和Vue（未来）中使用。\n## 无限滚动\n![无限滚动.gif](https://i.loli.net/2021/01/24/ju5CpZwvtUVkHR1.gif)\n### 特点\n1. 移动端 + PC\n2. 虚拟化，只渲染可视区域 + 根据滚动方向预先渲染\n3. 列表每一项**高度任意**，内容自适应\n4. 双向快速滚动，几乎无闪屏，平滑无感\n5. 双向缓存栈 + 文档碎片，复用多，渲染少，速度快\n6. 双向加载更多，上拉到顶 或 下拉到底，读取新数据\n## 下拉刷新\n![下拉刷新.gif](https://i.loli.net/2021/01/24/pfYku1XM25IUcDG.gif)\n### 特点\n1. 移动端 + PC\n2. 根据下拉距离，决定是否继续下拉，是否加载数据\n\n# 快速开始\n本插件打包采用`umd`模块化规范\n## 一 原生JS\n### 1.1 安装\n#### 1.1.1 NodeJS\n安装\n```shell\nnpm i mtfscrolllist -D\n```\n引入\n```javascript\nimport MtfScrollList from 'mtfscrolllist'\nconst mtfScrollList = new MtfScrollList()\n```\n#### 1.1.2 浏览器\n引入\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/mtfscrolllist@1.0.5/dist/mtfscrolllist.min.js\"\u003e\u003c/script\u003e\n```\n### 1.2 使用\n```html\n\u003cstyle\u003e\n.scrolllist {\n  height: 360px;\n  overflow: auto;\n}\n\u003c/style\u003e\n\u003cdiv id=\"scrolllist\" class=\"scrolllist\"\u003e\u003c/div\u003e\n\u003cscript\u003e\nconst data = [{id:1, text:'a'}, {id:2, img:'2.jpg'}]\nconst mtfScrollList = new MtfScrollList()\nmtfScrollList.init({\n  ele: document.getElementById('scrolllist'), // 容器\n  data: data, // 初始数据，默认为空\n  startIndex: 6, // 起始索引，默认是 初始数据的长度。如果容器初始HTML不为空，推荐指定起始索引\n  perPage: 6, // 每页条数，默认是 5。如果容器初始HTML不为空，推荐指定每页条数\n  render ({ data, index }) { // 渲染列表的每一项\n    const d = document.createElement('div')\n    d.setAttribute('index', index)\n    d.id = 'id' + index\n    d.innerHTML = data.text\n    return d\n  },\n  onTop ({ cb, page }) { // 上拉到顶，加载更多：回调函数，当前页数\n    setTimeout(() =\u003e {\n      cb(data)\n    }, 1500) // 模拟获取数据\n  },\n  onBottom ({ cb, page }) { // 下拉到底，加载更多：回调函数，当前页数\n    setTimeout(() =\u003e {\n      cb(data)\n    }, 0)\n  },\n  onPullDownStart ({ startY }) {// 下拉刷新：刚开始下拉。可获得起始Y坐标\n    let d = document.getElementById('tip')\n    removeChild(d)\n    d = document.createElement('div')\n    d.className = 'tip'\n    d.innerHTML = '下拉刷新'\n    d.id = 'tip'\n    document.body.appendChild(d)\n  },\n  onPullDownMove ({ paddingTop }) {// 下拉刷新：拖动下拉。可获得下拉距离\n    const d = document.getElementById('tip')\n    if (paddingTop \u003c 50) d.innerHTML = '您已下拉' + paddingTop\n    else if (paddingTop \u003e 100) return true // 返回true，阻止继续下拉\n    else d.innerHTML = '松开刷新'\n    d.style.marginTop = (paddingTop \u003e\u003e 1) + 'px'\n  },\n  onPullDownEnd ({ paddingTop, cb }) {// 下拉刷新：结束下拉。可获得下拉距离，将数据传入回调函数\n    const d = document.getElementById('tip')\n    if (paddingTop \u003e= 50) { // 到达指定下拉距离，开始获取数据\n      d.innerHTML = '开始为您刷新'\n      setTimeout(() =\u003e {\n        removeChild(d)\n        cb(data)\n      }, 1500)\n    } else { // 没有到到指定下拉距离，自动回弹\n      removeChild(d)\n    }\n  }\n})\n\u003c/script\u003e\n```\n## 二 React\n### 安装\n```shell\nnpm i mtfscrolllist -D\nnpm i react-mtfscrolllist -D\n```\n### 引入\n```javascript\nimport ReactMtfScrollList from 'react-mtfscrolllist'\n```\n### 使用\n```css\n.scrolllist {\n  height: 360px;\n  overflow: auto;\n}\n```\n```javascript\n\u003cReactMtfScrollList \n  className=\"scrolllist\"\n  data={this.state.data || []} // 可绑定props或state\n  perPage={6}\n  render={({data, index}) =\u003e \u003cdiv key={index}/\u003e{data}\u003c/div\u003e}/\u003e // 渲染列表每一项，支持传入React组件\n  onTop={cb =\u003e {}}\n  onBottom={cb =\u003e {}} \n  onPullDownStart={startY =\u003e {}} \n  onPullDownMove={paddingTop =\u003e {}} \n  onPullDownEnd={(paddingTop, cb) =\u003e {}}\n\u003e\u003c/ReactMtfScrollList\u003e\n```\n\n# 示例\n## 原生JS\n- [演示DEMO](https://mantoufan.github.io/mtfScrollList/mtfscrolllist/demo/)\n## React\n- [口袋豆瓣](http://w.page.imweb.io/douban-pocket/book)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantoufan%2Fmtfscrolllist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmantoufan%2Fmtfscrolllist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantoufan%2Fmtfscrolllist/lists"}