idiotWu/smooth-scrollbar for Vue.js projects.
- Infinite loading
yarn add @blackbp/vue-smooth-scrollbar 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 } }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> | 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 |
| 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 } } } Clone this repo
yarn install yarn run serve - Plugin structure
- Basic implementation
- Options
- Events
- Methods
- Styling
- Build dist
- SSR / nuxt