vue-scroller

Scroller Component for Vue.js

1,789

388

1,789

113

View on GitHub View on NPM

Top Related Projects

vue-scrollto

2,069

Adds a directive that listens for click events and scrolls to elements.

vue-infinite-scroll

2,854

An infinite scroll directive for vue.js.

vue-virtual-scroller

9,451

⚡️ Blazing fast scrolling for any amount of data

Quick Overview

Vue-scroller is a Vue.js component that provides smooth scrolling functionality with pull-to-refresh and infinite loading capabilities. It's designed to enhance the user experience in mobile web applications by offering native-like scrolling behavior and common mobile interaction patterns.

Pros

Easy integration with Vue.js projects
Supports both pull-to-refresh and infinite loading
Customizable styling and behavior
Lightweight and performant

Cons

Limited documentation and examples
May not be actively maintained (last commit was over 2 years ago)
Might have compatibility issues with newer Vue.js versions
Lacks advanced features found in some alternative scrolling libraries

Code Examples

Basic usage:

<template>
  <scroller>
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </scroller>
</template>

<script>
import { Scroller } from 'vue-scroller'

export default {
  components: { Scroller },
  data() {
    return {
      items: [/* ... */]
    }
  }
}
</script>

Pull-to-refresh implementation:

<template>
  <scroller :on-refresh="refresh" ref="scroller">
    <!-- Content here -->
  </scroller>
</template>

<script>
export default {
  methods: {
    refresh(done) {
      // Fetch new data
      setTimeout(() => {
        // Update data
        done() // Call when refresh is complete
      }, 1500)
    }
  }
}
</script>

Infinite loading:

<template>
  <scroller :on-infinite="loadMore" ref="scroller">
    <!-- Content here -->
  </scroller>
</template>

<script>
export default {
  methods: {
    loadMore(done) {
      // Load more data
      setTimeout(() => {
        // Append new data
        done() // Call when loading is complete
      }, 1500)
    }
  }
}
</script>

Getting Started

Install the package:
```
npm install vue-scroller
```

Import and use in your Vue component:

<template>
  <scroller>
    <!-- Your scrollable content here -->
  </scroller>
</template>

<script>
import { Scroller } from 'vue-scroller'

export default {
  components: { Scroller }
}
</script>

Configure options as needed (e.g., pull-to-refresh, infinite loading) using props and event handlers.

Competitor Comparisons

vue-scrollto

2,069

Adds a directive that listens for click events and scrolls to elements.

Pros of vue-scrollto

Lightweight and focused solely on scrolling functionality
Supports both Vue 2 and Vue 3
Offers more customization options for easing and duration

Cons of vue-scrollto

Limited to scrolling within the same page
Lacks pull-to-refresh and infinite scrolling features
May require additional plugins for more complex scrolling behaviors

Code Comparison

vue-scrollto:

import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
  container: "body",
  duration: 500,
  easing: "ease",
  offset: 0,
  force: true,
  cancelable: true,
  onStart: false,
  onDone: false,
  onCancel: false,
  x: false,
  y: true
})

vue-scroller:

import VueScroller from 'vue-scroller'

Vue.use(VueScroller)

<scroller
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content -->
</scroller>

vue-scrollto is more focused on smooth scrolling to specific elements within a page, offering various configuration options. vue-scroller, on the other hand, provides a more comprehensive solution for mobile-oriented scrolling, including pull-to-refresh and infinite scrolling functionalities. The choice between the two depends on the specific scrolling requirements of your Vue.js project.

vue-infinite-scroll

2,854

An infinite scroll directive for vue.js.

Pros of vue-infinite-scroll

Lightweight and focused solely on infinite scrolling functionality
Easy to implement with minimal configuration
Supports both upward and downward infinite scrolling

Cons of vue-infinite-scroll

Limited customization options compared to vue-scroller
Lacks built-in pull-to-refresh functionality
May require additional components for more complex scrolling scenarios

Code Comparison

vue-infinite-scroll:

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  <!-- Content -->
</div>

vue-scroller:

<scroller :on-infinite="infinite" ref="myscroller">
  <!-- Content -->
</scroller>

vue-infinite-scroll uses a directive approach, while vue-scroller employs a component-based implementation. vue-scroller offers more built-in features and customization options, making it suitable for complex scrolling scenarios. However, vue-infinite-scroll's simplicity and focused functionality make it an excellent choice for basic infinite scrolling needs.

Both libraries have their strengths, and the choice between them depends on the specific requirements of your project. vue-infinite-scroll is ideal for simple implementations, while vue-scroller is better suited for more advanced use cases requiring additional features and customization.

vue-virtual-scroller

9,451

⚡️ Blazing fast scrolling for any amount of data

Pros of vue-virtual-scroller

Better performance for large lists due to virtual scrolling
More active development and maintenance
Supports both horizontal and vertical scrolling

Cons of vue-virtual-scroller

More complex implementation
Requires additional setup for dynamic item sizes
May have a steeper learning curve for beginners

Code Comparison

vue-scroller:

<scroller
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content -->
</scroller>

vue-virtual-scroller:

<RecycleScroller
  class="scroller"
  :items="list"
  :item-size="32"
  key-field="id"
  v-slot="{ item }">
  <!-- item template -->
</RecycleScroller>

vue-scroller is simpler to implement for basic scrolling needs, while vue-virtual-scroller offers more advanced features and better performance for large datasets. vue-virtual-scroller requires specifying item size and key field, which allows for more efficient rendering of list items. However, this also means it requires more setup and configuration compared to vue-scroller.

vue-scroller focuses on pull-to-refresh and infinite scrolling functionalities, making it easier to implement these common mobile app features. On the other hand, vue-virtual-scroller is more suited for efficiently rendering large lists with smooth scrolling performance, regardless of the number of items.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Vue Scroller

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

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Menu

vue-scroller

Top Related Projects

vue-scrollto

vue-infinite-scroll

vue-virtual-scroller

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

vue-scrollto

Pros of vue-scrollto

Cons of vue-scrollto

Code Comparison

vue-infinite-scroll

Pros of vue-infinite-scroll

Cons of vue-infinite-scroll

Code Comparison

vue-virtual-scroller

Pros of vue-virtual-scroller

Cons of vue-virtual-scroller

Code Comparison

Convert designs to code with AI

README

Vue Scroller

Demo

How to use

Webpack project by vue-cli

API

Scroller component attributes:

Scroller vm instance methods:

Top Related Projects

vue-scrollto

vue-infinite-scroll

vue-virtual-scroller

Convert designs to code with AI

NPM DownloadsLast 30 Days