1.0.14 • Published 3 years ago
vue-simple-scroller v1.0.14
vue-simple-scroller
Installation
npm i vue-simple-scroller -D
API
Property | Description | Type | Default | Required |
---|---|---|---|---|
height | container height | string | 100% | false |
loading | show loading slot | boolean | false | false |
isEnd | show end slot | boolean | false | false |
event
Events Name | Description | Arguments | Version |
---|---|---|---|
on-end | triggered when the container reaches the bottom | (event) => void | |
on-top | triggered 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>