{"id":20127006,"url":"https://github.com/apeatling/web-pull-to-refresh","last_synced_at":"2025-04-05T22:05:46.877Z","repository":{"id":22800469,"uuid":"26146926","full_name":"apeatling/web-pull-to-refresh","owner":"apeatling","description":"A native-like JavaScript pull to refresh implementation for the web.","archived":false,"fork":false,"pushed_at":"2019-05-18T22:56:07.000Z","size":115,"stargazers_count":546,"open_issues_count":18,"forks_count":92,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-29T21:04:12.226Z","etag":null,"topics":["app","javascript","pull-to-refresh","pulltorefresh","web"],"latest_commit_sha":null,"homepage":"https://apeatling.com/articles/javascript-pull-to-refresh-web/","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/apeatling.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":"2014-11-04T01:19:32.000Z","updated_at":"2025-03-04T12:45:41.000Z","dependencies_parsed_at":"2022-08-07T10:16:13.734Z","dependency_job_id":null,"html_url":"https://github.com/apeatling/web-pull-to-refresh","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apeatling%2Fweb-pull-to-refresh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apeatling%2Fweb-pull-to-refresh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apeatling%2Fweb-pull-to-refresh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apeatling%2Fweb-pull-to-refresh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apeatling","download_url":"https://codeload.github.com/apeatling/web-pull-to-refresh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406085,"owners_count":20933803,"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":["app","javascript","pull-to-refresh","pulltorefresh","web"],"created_at":"2024-11-13T20:18:45.622Z","updated_at":"2025-04-05T22:05:46.863Z","avatar_url":"https://github.com/apeatling.png","language":"JavaScript","readme":"Pull to Refresh for the Web 1.1\n===============================\n\n![Web Pull to Refresh](https://apeatling.com/wp-content/uploads/2019/03/ptr-header1-1568x627.png)\n\nThis is a pull to refresh implementation for the web. It focuses on buttery UX performance and responsiveness to feel as close to a native implementation as possible.\n\n[Try a Demo](https://apeatling.github.io/web-pull-to-refresh/) | [Read the Blog Post](https://apeatling.com/articles/javascript-pull-to-refresh-web/)\n\n## Usage\n\nThere are two core elements needed, the content element and the pull to refresh UX element. The demo uses this setup, but you can modify this however you'd like.\n\n```\n\u003cdiv id=\"ptr\"\u003e\n  \u003c!-- Pull down arrow indicator --\u003e\n  \u003cspan class=\"genericon genericon-next\"\u003e\u003c/span\u003e\n\n  \u003c!-- CSS-based loading indicator --\u003e\n  \u003cdiv class=\"loading\"\u003e\n    \u003cspan id=\"l1\"\u003e\u003c/span\u003e\n    \u003cspan id=\"l2\"\u003e\u003c/span\u003e\n    \u003cspan id=\"l3\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"content\"\u003e\n  \u003c!-- Content that should be draggable for refreshing goes in here --\u003e\n\u003c/div\u003e\n```\n\nThis will work just fine with your own loading indicators or pull down arrow, just make sure they're wrapped in the element you're using to hold the pull to refresh UX. Don't forget to include the CSS if you want to use a similar visual setup as the demo.\n\nIn order for this to function, you'll need to load both Hammer.js and the wptr.js script, and then initialize the WebPullToRefresh module. Add this just before the closing body tag:\n\n```\n\u003cscript src=\"lib/hammer.2.0.4.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"lib/wptr.1.0.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  window.onload = function() {\n    WebPullToRefresh.init( {\n      loadingFunction: exampleLoadingFunction\n    } );\n  };\n\u003c/script\u003e\n```\n\nYou will also need to provide a loading function at initization time. This function should perform the async loading pieces you need to load new items, and return a promise.\n\n```\nvar exampleLoadingFunction = function() {\n  return new Promise( function( resolve, reject ) {\n    // Run some async loading code here\n\n    if ( /* if the loading worked */ ) {\n      resolve();\n    } else {\n      reject();\n    }\n  } );\n};\n```\n\n### Optional Parameters\n\nThere are a few optional parameters you can pass on initialization:\n\n```\n{\n\t// ID of the element holding dragable content area\n\tcontentEl: 'content', \n\n\t// ID of the element holding pull to refresh loading area\n\tptrEl: 'ptr', \n\n\t// Number of pixels of dragging down until refresh will fire\n\tdistanceToRefresh: 70, \n\n  // The dragging resistance level, the higher the more you'll need to drag down.\n  resistance: 2.5\n}\n```\n\n[Try a Demo](https://apeatling.github.io/web-pull-to-refresh/) | [Read the Blog Post](https://apeatling.com/articles/javascript-pull-to-refresh-web/)\n","funding_links":[],"categories":["13. 页面交互"],"sub_categories":["13.10 滚动加载更多/下拉刷新(Pull to Refresh) ###","13.10 滚动加载更多/下拉刷新(Pull to Refresh)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapeatling%2Fweb-pull-to-refresh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapeatling%2Fweb-pull-to-refresh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapeatling%2Fweb-pull-to-refresh/lists"}