{"id":20877712,"url":"https://github.com/dafrok/vue-iscroll-view","last_synced_at":"2025-04-09T15:06:05.408Z","repository":{"id":51695770,"uuid":"73898642","full_name":"Dafrok/vue-iscroll-view","owner":"Dafrok","description":"IScroll-view component for Vue 2.x","archived":false,"fork":false,"pushed_at":"2021-05-10T17:52:17.000Z","size":717,"stargazers_count":148,"open_issues_count":7,"forks_count":26,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T15:06:01.094Z","etag":null,"topics":["iscroll","vue","vue-iscroll"],"latest_commit_sha":null,"homepage":"https://dafrok.github.io/vue-iscroll-view","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/Dafrok.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-11-16T08:17:09.000Z","updated_at":"2024-05-07T06:43:43.000Z","dependencies_parsed_at":"2022-08-23T01:31:35.299Z","dependency_job_id":null,"html_url":"https://github.com/Dafrok/vue-iscroll-view","commit_stats":null,"previous_names":["dafrok/vue-iscroll-lite"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dafrok%2Fvue-iscroll-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dafrok%2Fvue-iscroll-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dafrok%2Fvue-iscroll-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dafrok%2Fvue-iscroll-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dafrok","download_url":"https://codeload.github.com/Dafrok/vue-iscroll-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055284,"owners_count":21040157,"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":["iscroll","vue","vue-iscroll"],"created_at":"2024-11-18T06:58:20.286Z","updated_at":"2025-04-09T15:06:05.391Z","avatar_url":"https://github.com/Dafrok.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/vue-iscroll-view.svg)](https://badge.fury.io/js/vue-iscroll-view)\n\n# vue-iscroll-view\n\n[IScroll](https://github.com/cubiq/iscroll) component for Vue 2.x\n\n## Demo\n\n\u003e https://dafrok.github.io/vue-iscroll-view/\n\n## Built with vue-iscroll-view\n- [vue-flexible-app](https://github.com/momopig/vue-flexible-app)\n\n## Install\n\n```bash\n$ npm i vue-iscroll-view\n$ npm i iscroll\n```\n\n## Get Start\n\n```javascript\nimport IScrollView from 'vue-iscroll-view'\n\n/* Using these kinds of IScroll class for different cases. */\nimport IScroll from 'iscroll'\n// import IScroll from 'iscroll/build/iscroll-infinite.js\n// import IScroll from 'iscroll/build/iscroll-probe.js\n// import IScroll from 'iscroll/build/iscroll-view.js\n// import IScroll from 'iscroll/build/iscroll-zoom.js\n// import IScroll from 'iscroll/build/iscroll-lite.js\n\nVue.use(IScrollView, IScroll)\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003ciscroll-view class=\"scroll-view\"\u003e\n    Your contents\n  \u003c/iscroll-view\u003e\n\u003c/tempalte\u003e\n\n\u003cstyle\u003e\n.scroll-view {\n  /* -- Attention: This line is extremely important in chrome 55+! -- */\n  touch-action: none;\n  /* -- Attention-- */\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n}\n\u003c/style\u003e\n```\n\n## Usage\n\n### Set IScroll options\n\n```vue\n\u003ctemplate\u003e\n  \u003ciscroll-view :options=\"{preventDefault: false}\"\u003e\n    Your contents\n  \u003c/iscroll-view\u003e\n\u003c/tempalte\u003e\n```\n\n### Listen IScroll events\n\n```vue\n\u003ctemplate\u003e\n  \u003ciscroll-view @scrollStart=\"log\"\u003e\n    Your contents\n  \u003c/iscroll-view\u003e\n\u003c/tempalte\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    log (iscroll) {\n      console.log(iscroll)\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### Call IScroll instance functions\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ciscroll-view ref=\"iscroll\"\u003e\n      Your contents\n    \u003c/iscroll-view\u003e\n    \u003cbutton @click=\"scrollToTop\"\u003eScroll To Top\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/tempalte\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    scrollToTop () {\n      const iscroll = this.$refs.iscroll\n      iscroll.scrollTo(0, 0, 100)\n      iscroll.refresh()\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### Custom events\n\n- pullUp\n- pullDown\n\n```vue\n\u003ctemplate\u003e\n  \u003ciscroll-view @pullUp=\"load\" @pullDown=\"refresh\"\u003e\n    Your contents\n  \u003c/iscroll-view\u003e\n\u003c/tempalte\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    refresh (iscroll) {\n      // Refresh current data\n    },\n    load (iscroll) {\n      // Load new data\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### The Scroller\n\nEach iscroll instance contains a wrapper and a scroller, the `\u003ciscroll-view\u003e` element is simply a reference the wrapper. If you need to take control of the scroller, the following case may help you.\n\n```vue\n\u003ctemplate\u003e\n  \u003ciscroll-view ref=\"iscroll\" :scrollerStyle=\"{color: 'red'}\" scrollerClass=\"{scroller: true}\"\u003e\n    Your contents\n  \u003c/iscroll-view\u003e\n\u003c/tempalte\u003e\n\n\u003cscript\u003e\nexport default {\n  mounted () {\n    /* Get the reference of the scroller */\n    const $scroller = this.$refs.iscroll.$refs.scroller\n    console.log($scroller)\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n.scroller {\n  background: blue\n}\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdafrok%2Fvue-iscroll-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdafrok%2Fvue-iscroll-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdafrok%2Fvue-iscroll-view/lists"}