GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → wangdahoo → Vue Scroller

wangdahoo / Vue Scroller

Scroller Component for Vue.js

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
HTML
75241 projects

Labels

vueinfinite-scrollpull-to-refreshvue-scroller

Projects that are alternatives of or similar to Vue Scroller

tulip-scroll
📜 多场景的下拉组件和更多，https://artiely.gitee.io/scroll-docs/
Stars: ✭ 44 (-97.52%)
Mutual labels:  infinite-scroll, vue-scroller, pull-to-refresh
Pull To Refresh
ESPullToRefresh is developed and maintained by Vincent Li. If you have any questions or issues in using ESPullToRefresh, welcome to issue. If you want to contribute to ESPullToRefresh, Please submit Pull Request, I will deal with it as soon as possible.
Stars: ✭ 1,591 (-10.37%)
Mutual labels:  infinite-scroll, pull-to-refresh
vue-data-loading
Another component for infinite scroll and pull down/up to load data.
Stars: ✭ 63 (-96.45%)
Mutual labels:  infinite-scroll, pull-to-refresh
React Native Ultimate Listview
A high performance FlatList providing customised pull-to-refresh | auto-pagination & infinite-scrolling | gridview layout | swipeable-row.
Stars: ✭ 497 (-72%)
Mutual labels:  infinite-scroll, pull-to-refresh
vuejs-loadmore
A pull-down refresh and pull-up loadmore scroll component for Vue.js. Vue上拉加载下拉刷新组件
Stars: ✭ 62 (-96.51%)
Mutual labels:  infinite-scroll, vue-scroller
Vue Pull To
⚡️ A pull-down refresh and pull-up load more and infinite scroll component for Vue.js --Vue下拉刷新组件
Stars: ✭ 708 (-60.11%)
Mutual labels:  infinite-scroll, pull-to-refresh
Minirefresh
优雅的H5 下拉刷新。零依赖，高性能，多主题，易拓展。(A Graceful HTML5 Drop-Down-Refresh Plugin. )
Stars: ✭ 1,525 (-14.08%)
Mutual labels:  pull-to-refresh
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+10.54%)
Mutual labels:  infinite-scroll
Reactables
GigaTables is a ReactJS plug-in to help web-developers process table-data in applications and CMS, CRM, ERP or similar systems.
Stars: ✭ 112 (-93.69%)
Mutual labels:  infinite-scroll
Pull To Make Soup
Custom animated pull-to-refresh that can be easily added to RecyclerView
Stars: ✭ 1,443 (-18.7%)
Mutual labels:  pull-to-refresh
Vertical Collection
Infinite Scroll and Occlusion at > 60FPS
Stars: ✭ 144 (-91.89%)
Mutual labels:  infinite-scroll
Periscopypulltorefresh
Pull-To-Refresh view inspired by Periscope application written in swift
Stars: ✭ 134 (-92.45%)
Mutual labels:  pull-to-refresh
Xrefreshlayout
【已过时，不再更新，请使用更强大的SmartRefreshLayout！】A refresh layout(无侵入下拉刷新和加载布局), can refresh RecyclerView for all LayoutManager, NestedScrollView。
Stars: ✭ 127 (-92.85%)
Mutual labels:  pull-to-refresh
Vue Pull To Refresh
vue.js,refresh,load more,Vue2.0 上下拉刷新
Stars: ✭ 129 (-92.73%)
Mutual labels:  pull-to-refresh
Liquidrefreshlayout
Liquid Refresh Layout is a simple SwipeToRefresh library that helps you easily integrate SwipeToRefresh and performs simple clean liquid animation
Stars: ✭ 114 (-93.58%)
Mutual labels:  pull-to-refresh
Taurus
A little more fun for the pull-to-refresh interaction.
Stars: ✭ 1,674 (-5.69%)
Mutual labels:  pull-to-refresh
Justified Gallery
Javascript library to help creating high quality justified galleries of images. Used by thousands of websites as well as the photography community 500px.
Stars: ✭ 1,512 (-14.82%)
Mutual labels:  infinite-scroll
React Intersection List
React infinite scroll using the Intersection <Observer /> API
Stars: ✭ 125 (-92.96%)
Mutual labels:  infinite-scroll
Od Virtualscroll
🚀 Observable-based virtual scroll implementation in Angular
Stars: ✭ 133 (-92.51%)
Mutual labels:  infinite-scroll
Ember Impagination
An Ember Addon that puts the fun back in asynchronous, paginated datasets
Stars: ✭ 123 (-93.07%)
Mutual labels:  infinite-scroll
View All Similar Projects ➔

Vue Scroller version vue

Vue Scroller is a foundational component of Vonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.

For vue 1.0, please refer to branch v1.

Demo

https://wangdahoo.github.io/vue-scroller/

How to use

npm i vue-scroller -S
/* ignore this if you include vue-scroller.js by <script> tag from a cdn, such as unpkg */
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
<scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</scroller>

Live Code on JsFiddle

Webpack project by vue-cli

https://github.com/wangdahoo/vue-scroller-demo

API

Scroller component attributes:

Attr. Name Description Required Default Value
onRefresh pull to refresh callback N -
onInfinite infinite loading callback N -
refreshText tips of pull-to-refresh N 下拉刷新
noDataText tips of no-more-data when infinite-loading finished N 没有更多数据
width scroller container width N 100%
height scroller container height N 100%
snapping enable snapping mode N false
snappingWidth snapping width N 100 (stand for 100px)
snappingHeight snapping height N 100
refreshLayerColor text color of pull-to-refresh layer N #AAA
loadingLayerColor text color of infinite-loading layer N #AAA
minContentHeight min content height (px) of scroll-content N 0

Scroller vm instance methods:

  • resize() resize scroller content (deprecated, cause the scroller's content resizes self automatically)
  • triggerPullToRefresh() start pull-to-refresh manually
  • finishPullToRefresh() stop pull-to-refresh
  • finishInfinite(isNoMoreData :Boolean) stop infinite-loading
  • scrollTo(x:Integer, y:Integer, animate:Boolean) scroll to a position in scroller content
  • scrollBy(x:Integer, y:Integer, animate:Boolean) scroll by a position in scroller content
  • getPosition :Object get current position of scroller content
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].