infinite list based on vue2

Related tags

vue-infinite-list
Overview

vue-infinite-list

infinite list based on vue2.

Installation

npm i vue-infinite-list

demo

npm run start

Basic Use

import and register the infinite list component.

import InfiniteList from 'vue-infinite-list'

Vue.component(InfiniteList.name, InfiniteList)

use it in you app, pass the list item component and spinner component to infinite list component, config the props.

<template>
  <div id="app">
      <infinite-list @load="load" :list-item="listItem" :spinner="loadSpinner" :container-height="containerHeight" :item-height="itemHeight" :items="items" :loading="loading">
      </infinite-list>
    </div>
</template>

<script>
import ListItem from './ListItem.vue'
import LoadSpinner from './LoadSpinner.vue'

export default {
  data() {
    return {
      listItem: ListItem,
      loadSpinner: LoadSpinner
    }
  },
  methods: {
    load() {
      //...
    }
  }
  // ...
}

</script>

Configuration

listItem

the list item component

spinner

this load spinner component

containerHeight

the height of the list container

itemHeight

the height of the item

items

array of list items. list item data must contain a unique id which used as the key.

blockFactor

the list is split to many blocks of the same height(blockFactor * containerHeight)

extendFactor

the extra height(extendFactor * containerHeight) should render

loading

the loading status

Event

load

notify the parent component to load more list items

Issues
  • Infinite scroller did not have a scrollbar - issue fixed (In Vuetify)

    Infinite scroller did not have a scrollbar - issue fixed (In Vuetify)

    Fixed the infinite scrollbar not having a scrollbar issue with the help of custom scrollbars

    [https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp]

    Use the

    /*_ width */ ::-webkit-scrollbar { width: 10px; }

    /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; }

    /* Handle */ ::-webkit-scrollbar-thumb { background: #888; }

    /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; }

    opened by GeorgeZoum 1
  • Refresh items on content change

    Refresh items on content change

    This will check if the content of the arrays has changed, even if the number of items displayed stays the same, and update them in that case.

    opened by FCalabria 1
Infinite scroll component compatible with vuejs-3 and vitejs

Intro An infinite scroll component compatible with vue.js 3 and vite, to help you implement an infinite scroll list more easily. Features Lightweight

abdelouahed oumoussa 6 Oct 4, 2021
infinite list based on vue2

vue-infinite-list infinite list based on vue2. Installation npm i vue-infinite-list demo npm run start Basic Use import and register the infinite li

null 27 Sep 26, 2020
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 393 Sep 28, 2021
Vue.js wrapper for perfect scrollbar

vue2-perfect-scrollbar Vue.js minimalistic but powerful wrapper for perfect scrollbar Are you looking compatible version with Vue3 ? check https://git

Adam 247 Oct 11, 2021
基于vue3的无限滚动插件

无缝滚动插件 安装 npm i vue3-infinite-scroll-xs cnpm i vue3-infinite-scroll-xs 使用 import doron from 'vue3-infinite-scroll-xs' app.use(doron) <infinit

白大熊 4 Jul 8, 2021
Infinite scroll component created with Vue & sass

Vue Infinite-Scroll component With Futurama Characters <3 Demo Link Also works for mobile devices Project setup npm install Compiles and hot-reloads

Larissa Avila 0 Jan 12, 2021
Scrollspy for Vue2

vue2-scrollspy Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See https://ibufu.github.io/vue2-scrollspy/ or Jsfiddle. Instal

morning 130 Sep 1, 2021
Vue.js wrapper for perfect scrollbar

vue2-perfect-scrollbar Vue.js minimalistic but powerful wrapper for perfect scrollbar Are you looking compatible version with Vue3 ? check https://git

Adam 247 Oct 11, 2021
Smooth scrollbar for Vue.js projects

Vue Smooth Scrollbar Smooth Scrollbar for Vue.js projects. Based on @idiotwu's smooth-scrollbar. Usage 1. Install dependency npm install --save vue-sm

Magisters 31 Aug 12, 2021
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 6.1k Oct 13, 2021
A Vue component to add intersection-observer to a Vue component or HTML element.

Vue Intersect A Vue component to add intersection-observer to a Vue component or HTML element. Table of content Introduction Demo Installation Usage P

WEAREHEAVY® 306 Sep 30, 2021
A scroll to top component for Vue 3

A scroll to top component for Vue 3

Willy Hong 4 Aug 26, 2021
null 1 Oct 8, 2021
📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

Yunwei Xiao 155 Oct 14, 2021
📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

Yunwei Xiao 154 Sep 8, 2021
URL shortener / redirection service powered by Supabase, Cloudflare Workers and Cloudflare Pages.

Launch your own personal URL shortener / redirection service using free tiers of Supabase, Cloudflare Workers and Cloudflare Pages. Features Redirecti

Supaflare 4 Oct 13, 2021
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

Yazhe Wang 136 Jul 13, 2021
A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

Roc Wong 37 Oct 10, 2021
Bring your scroll game to the next level!

VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

Developmint GbR 49 Mar 2, 2021