1.0.14 • Published 3 years ago

vue-simple-scroller v1.0.14

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

vue-simple-scroller

Installation

npm i vue-simple-scroller -D

API

PropertyDescriptionTypeDefaultRequired
heightcontainer heightstring100%false
loadingshow loading slotbooleanfalsefalse
isEndshow end slotbooleanfalsefalse

event

Events NameDescriptionArgumentsVersion
on-endtriggered when the container reaches the bottom(event) => void
on-toptriggered when the container reaches the top(event) => void

Using

main.js

import { createApp } from 'vue'
import App from './App.vue'

import VueSimpleScroller from 'vue-simple-scroller';
import 'vue-simple-scroller/dist/style.css';

createApp(App).use(VueSimpleScroller).mount('#app')

Example

demo.vue

<script setup lang="ts">
import { ref } from 'vue'

const isTop = ref(false);
const isEnd = ref(false);
const loading = ref(false);

const handleTop = () => {
  console.log('top~~~')
};
  
const handleEnd = () => {
  console.log('end~~~')
};
</script>

<template>
  <vue-simple-scroller height="100px" @on-end="handleEnd" @on-top="handleTop" :is-end="isEnd" :loading="loading">
    <template v-slot:isTop>
      <div style="text-align: center">top~</div>
    </template>
    <template v-slot:isEnd>
      <div style="text-align: center">end~</div>
    </template>
    <template v-slot:loading>
      <div>loading...</div>
    </template>
    <div
        v-for="(item, index) in 100"
        :key="index"
    >
      {{ item }}
    </div>
  </vue-simple-scroller>
</template>
1.0.9

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago