Skip to content

BlackBP/vue-smooth-scrollbar

Repository files navigation

vue-smooth-scrollbar

idiotWu/smooth-scrollbar for Vue.js projects.

Features

  1. Infinite loading

Demo

GitHub Pages

Usage

1. Install dependency

yarn add @blackbp/vue-smooth-scrollbar

2. Import component into your app.js or component

In your App.js

import Vue from 'vue'
...
import ScrollView from '@blackbp/vue-smooth-scrollbar'
...

new Vue({
    components: {
        ScrollView
    }
})

In vue single file component

import ScrollView from '@blackbp/vue-smooth-scrollbar'

export default {
    components: {
        ScrollView
    }
}

3. Use component in your templates

You should set height to component! This is important

<template>
    <scroll-view class="scroll-area">
        ...awesome content
    </scroll-view>
</template>

<style>
  .scroll-area {
    width: 100%;
    height: 500px; // You should set height to component! This is important
  }
</style>

Props

Prop name Type Default Description
infiniteLoading Boolean false Enable infinite loading
loadThreshold Number 50 Infinite loading threshold (distance from a bottom of content)
options Object {} smooth-scroll options. See here.
plugins Array [] Array of smooth-scrollbar plugins

Events

Event name Args Description
@endy - Reaching the end of the scroll on the y axis
@endx - Reaching the end of the scroll on the x axis
@scroll status: Object Fires when scrolling on every axis (see details below)
@loading state: Object Fires when reaching the end of the content

@scroll status object:

let status = {
    offset: {
        x: number,
        y: number,
    },
    limit: {
        x: number,
        y: number,
    },
}

@loading state object:

// Your component
<template>
    <scroll-view ref="scrollView" 
                 :infinite-loading="true" 
                 @loading="onInfinite">
        <div v-for="item in list" 
             :key="`awesome-item-${item.id}`">
            ...awesome content
        </div>
    </scroll-view>
</template>

export default {
    data() {
        return {
            list: [],
            page: 1
        }
    },
    methods: {
        async onInfinite(state) {
            let res = await someAsyncFunc();
            
            if(res.list) {
                this.list.push(...rest.list);
                this.page = ++this.page;
                state.loaded(); // If there is data, then set state loaded (keep emit @loading event)
            } else {
                state.completed(); // If no data, then set state completed (stop emit @loading event)
            }
        },
        resetInfScroll() {
            this.$refs.scrollView.resetInfLoad(); // Resets the state of the infinite load
        }
    }
}

To run example

Clone this repo

yarn install
yarn run serve

Backlog

  • Plugin structure
  • Basic implementation
  • Options
  • Events
  • Methods
  • Styling
  • Build dist
  • SSR / nuxt