{"id":19974436,"url":"https://github.com/alanchenchen/v-scroller","last_synced_at":"2025-05-04T02:32:49.004Z","repository":{"id":57389782,"uuid":"108095333","full_name":"alanchenchen/v-scroller","owner":"alanchenchen","description":"A vue plugin for nesting scroller ,you can use it to expand more components such as banner,date-piacker and so on.","archived":false,"fork":false,"pushed_at":"2019-06-06T09:39:20.000Z","size":20961,"stargazers_count":35,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-12-09T15:20:25.386Z","etag":null,"topics":["direction-scroller","nesting-scroller","scroller","vue-plugin","vue-scroller","vue2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alanchenchen.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":"2017-10-24T07:58:39.000Z","updated_at":"2021-07-08T19:18:39.000Z","dependencies_parsed_at":"2022-09-02T10:50:19.090Z","dependency_job_id":null,"html_url":"https://github.com/alanchenchen/v-scroller","commit_stats":null,"previous_names":[],"tags_count":5,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanchenchen%2Fv-scroller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanchenchen%2Fv-scroller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanchenchen%2Fv-scroller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanchenchen%2Fv-scroller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alanchenchen","download_url":"https://codeload.github.com/alanchenchen/v-scroller/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224379842,"owners_count":17301525,"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":["direction-scroller","nesting-scroller","scroller","vue-plugin","vue-scroller","vue2"],"created_at":"2024-11-13T03:15:01.210Z","updated_at":"2024-11-13T03:15:01.967Z","avatar_url":"https://github.com/alanchenchen.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# v-scroller\n\u003e A mobile Vue plugin for scroller\n\n\u003e pluginName:  v-scroller\n\n\u003e version: 1.2.5\n\n\u003e author:\tAlan Chen\n\n\u003e github:\talanchenchen@github.com\n\n\u003e date:\t2018/08/14\n\n![](https://img.shields.io/npm/dt/v-scroller.svg)\n![](https://img.shields.io/npm/v/v-scroller.svg)\n![](https://img.shields.io/badge/vue-%3E%3D2.0.0-orange.svg)\n[![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)\n\n#### This plugin is just only adapted for mobile. Please use the rem layout\n\n\u003e Please go to the release to see version logs.\n\n## Why making this plugin\n* There are so many vue plugins on github,but i haven't found a suitable mini vue plugin for scroller.The best scroller plugin i have seen is the 'better-scroller',however it's not for vue especially.I decide to make a mini vue scroller plugin for my own company programs also for people who wanna use scroller simply.\n\n## What you can do with the plugin\n* You can use it to make a scroller container includes pulling-refresh,infinite-loading and horizonal scroller also supporting nesting different direction scroller.\n\n![horizonalMode](./horizonalMode.gif) ![verticalMode](./verticalMode.gif)\n\n[中文文档](./ChineaseREADME.md)\n## How to use\n* NPM install the v-scroller plugin\n```node\nyarn add v-scroller   or   npm install v-scroller --save\n```\n#### 1.vue spa\n* import the plugin and use  \n``` javascript \nimport scroller from 'v-scroller'\nimport 'v-scroller/dist/v-scroller.css'\nVue.use(scroller)\n```\n#### 2.script html\n* directly write the script,in deed you have to `insert the vue.js` script firstly  \n``` html \n\u003clink rel=\"stylesheet\" href=\"node_modules/v-scroller/dist/v-scroller.css\"\u003e\u003c/link \u003e\n\u003cscript src=\"node_modules/v-scroller/dist/v-scroller.js\"\u003e\u003c/script\u003e\n```\n* use the component scroller directly in your vue spa file or the Vue instance\n``` javascript \n\u003cscroller /\u003e\n```\n\n## DEMO Codes\n``` javascript \n\u003ctemplate\u003e\n\t\u003c!--verticalMode and infinite and refresh--\u003e\n\t\u003cscroller\n\t\tref=\"scroll\"\n\t\t@downFresh=\"downfresh\"\n\t\t@upLoad=\"upload\"\n\t\t@scroll=\"showPosition\"\n\t\t@afterScroll=\"showPosition\"\n\t\t:snapping=\"snapping\"\n\t\t:smooth=\"smooth\"\n\t\t:isDownFresh=\"isDownFresh\"\n\t\t:isUpLoad=\"isUpLoad\"\n\t\t\u003e\n\t\t\u003cdiv slot=\"nomore\" class=\"nomore\"\u003ethere is nomore data~\u003c/div\u003e\n\t\t\u003cul\u003e\n\t\t\t\u003cli :class=\"{active:index%2==0}\" v-for=\"(item,index) of num\" :key=\"item\"\u003enumber {{item}} item\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/scroller\u003e\n\t\n\t\u003c!--nesting scroller with horizonalMode and verticalMode--\u003e\n\t\u003cscroller\n\t\tref=\"scroll\"\n\t\t:snapping=\"snapping\"\n\t\t@scroll=\"showPosition\"\n\t\t@afterScroll=\"showPosition\"\n\t\t\u003e\n\t\t\u003cdiv class=\"_testBox\" v-for=\"item of 20\"\u003e\n\t\t\t\u003cscroller\n\t\t\t\t@upLoad=\"upload\"\n\t\t\t\t:snapping=\"snapping\"\n\t\t\t\t:isUpLoad=\"isUpLoad\"\n\t\t\t\t:horizonalMode=\"horizonalMode\"\n\t\t\t\t\u003e\n\t\t\t\t\u003cdiv class=\"boxRoom\"\u003e\n\t\t\t\t\t\u003cdiv :class=\"{active:index%2==0}\" class=\"box\" v-for=\"(item,index) of num\" :key=\"item\"\u003e{{item}}\u003c/div\u003e\t\t\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/scroller\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv slot=\"nomore\" class=\"nomore\"\u003ethere is nomore data~\u003c/div\u003e\n\t\u003c/scroller\u003e\n\t\u003c!--goTop using the scrollTo() function--\u003e\n\t\u003cdiv class=\"record\" @click=\"goTop\"\u003e\n\t\tx:{{left}},y:{{top}}\n\t\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default{\n\tdata(){\n\t\treturn{\n\t\t\tnum:[],\n\t\t\tsnapping:true,\n\t\t\tisDownFresh:true,\n\t\t\tisUpLoad:true,\n\t\t\tsmooth:true,\n\t\t\thorizonalMode:true,\n\t\t\tleft:0,\n\t\t\ttop:0\n\t\t}\n\t},\n\tcreated(){\n\t\tfor(let i=0;i\u003c5;i++){\n\t\t\tthis.num.push(i)\n\t\t}\n\t},\n\tmethods:{\n\t\tdownfresh(done){\n\t\t\tconsole.log('refreshing finished')\n\t\t\tlet b = this.num[0];\n\t\t\tfor(let i = b;i\u003e=b-5;i--){\n\t\t\t\tthis.num.unshift(i);\n\t\t\t}\n\t\t\tdone() // you should call the done to close the loading\n\t\t},\n\t\tupload(done){\n\t\t\tconsole.log('infinite loading finished')\n\t\t\tif(this.num[this.num.length-1]\u003c25){\n\t\t\t\tlet b = this.num[this.num.length-1];\n\t\t\t\tfor(let i = b+1;i\u003c=b+5;i++){\n\t\t\t\t\tthis.num.push(i);\n\t\t\t\t}\n\t\t\t\tdone() // you should call the done to close the loading\n\t\t\t}else{\n\t\t\t\tthis.$refs.scroll.closeLoad();\n\t\t\t}\n\t\t},\n\t\tshowPosition(){\n\t\t\tlet {x:left,y:top} = this.$refs.scroll.getPosition();\n\t\t\tthis.left = left;\n\t\t\tthis.top = top;\n\t\t},\n\t\tgoTop(){\n\t\t\tthis.$refs.scroll.scrollTo(0,true);\n\t\t\tthis.showPosition();\n\t\t}\n\t}\n}\n\u003c/script\u003e\n```\n\n\u003e It's suggested that write a single function for ajax in methods and then use the ajax function at the lifeCircle of created，you can continue to use it at the plugin emiting event -- upLoad.Like this：\n\n``` javascript \n\tcreated(){\n\t\t//when the component created ,use the ajax function firstly\n\t\tthis.refreshData();\n\t},\n\tmethods:{\n\t\trefreshData(done){\n\t\t\tconst data = `telephone=${this.$store.state.BookOrderInfo.telephone}\u0026start=${this.start}\u0026limit=${this.limit}`\n\t\t\tthis.$http({\n\t\t\t\tmethod:'POST',\n\t\t\t\turl:this.$_URL+'/api/listHistoryRecord',\n\t\t\t\tdata:data\n\t\t\t})\n\t\t\t.then(\n\t\t\t\tres=\u003e{\n\t\t\t\t\tif(res.data.code == '0000'){\n\t\t\t\t\t\t//if nomore data from the back-end ,use the plugin function closeLoad()\n\t\t\t\t\t\tif(res.data.data.length==this.History.length){\n\t\t\t\t\t\t\tthis.$refs.scroller.closeLoad();\n\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\tthis.History = res.data.data;\n\t\t\t\t\t\t\tdone()\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(\n\t\t\t\terr=\u003econsole.log(err)\n\t\t\t)\n\t\t},\n\t\tupLoad(done){\n\t\t\tthis.limit+=this.limit;//this is the length of data while you request the back-end\n\t\t\tthis.refreshData(done);\n\t\t}\n\t}\n```\n\n## Options\n#### props\n\n| prop name  |      description                         |required| default |\n|:-----------:|:----------------------------------------:|:------:|:-------:|\n| snapping    | `[Boolean]`enable snapping mode          |   no   |  false  |\n| smooth      | `[Boolean]`enable smooth scrolling       |   no   |  true   |\n| isDownFresh | `[Boolean]`enable pull down to refresh   |   no   |  false  |\n| isUpLoad    | `[Boolean]`enable infinite loading       |   no   |  false  |\n|horizonalMode| `[Boolean]`enable horizonal scroller mode|   no   |  false  |\n\n\u003e Notice:while switching horizonalMode,only upLoad is abled to work,it shows that scroll-right infinite loading also the emit event name is the same to `upLoad`.\n\n#### emit events\n* `downFresh(done) `   when you pull down your container at the top border,write your logic in it usually write the ajax.Make sure the `isDownFresh` prop is `true`.`done` should be called while you finish the ajax .\n* `upLoad(done) `   when you scroll your container at the bottom border,write your logic in it usually write the ajax.Make sure the `isUpLoad` prop is `true`.`done` should be called while you finish the ajax. However if `horizonalMode` enabled, there isn't `done` available!\n* `beforeScroll `  before you scroll just mean you touch the container. \n* `scroll `  when you're scrolling the container.\n* `afterScroll `  after you scroll just mean you raise your finger from the container.\n\n#### plugin methods\n\u003e Notice:You have to add `ref` to the component `scroller` and then use `this.$refs` to get following methods.\n\n* `closeLoad (Function) `  no param,forbid infinite loading animation,usually use when your ajax finished.\n* `refreshLoad(Function) ` no param,refresh infinite loading .\n* `getPosition (Function)`  no param,get current position of scroller content. \n* `scrollTo (Function(Number,Boolean)) `   scroll to a position in scroller content,two params,the first param required `Number`,the second param isn't required ,it means whether open or close the scrolling animation.\n\n#### slots\n\n| slot name    |      description                         | default     | suggest                 |\n|:------------:|:----------------------------------------:|:-----------:|:-----------------------:|\n| `downfresh`  | animation during pull-down refresh       |   svg       |  add className spinner  |\n| `downfreshText`| text during pull-down refresh          |   下拉刷新   |                         |\n| `upload`     | animation during infinite loading        |   svg       |  add className spinner  |\n| `nomore`     | text while foridden infinite loading     |没有更多内容了|  add className nomore   |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanchenchen%2Fv-scroller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falanchenchen%2Fv-scroller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanchenchen%2Fv-scroller/lists"}