
Security News
Open Source CAI Framework Handles Pen Testing Tasks up to 3,600× Faster Than Humans
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
vue-data-loading
Advanced tools
Another component for infinite scroll and pull down/up to load data.
Another component for infinite scroll and pull down/up to load data.
Here is a demo: HackNews
npm install vue-data-loading --save
Import first:
import VueDataLoading from 'vue-data-loading'
Register as a component:
components: {
VueDataLoading
},
The only you need to do is wrapping your data with vue-data-loading
tag.
<vue-data-loading>
<ul>
<li v-for="(item, index) in list" :key="index">Item: {{item}}</li>
</ul>
</vue-data-loading>
However, you can pass some props
or events
to the component.
<vue-data-loading :loading="loading" :listens="['pull-down', 'infinite-scroll']" @infinite-scroll="infiniteScroll" @pull-down="pullDown">
<!--your data here-->
</vue-data-loading>
Sometimes, you may want to change the default style or text(html), that is easy, just edit the slot
:
Here is a example for infinite-scroll-loading
slot:
default:
<slot :name="infinite-scroll-loading">加载中...</slot>
edit:
<div slot="infinite-scroll-loading" class="some-style-you-like">
<img src="/path/to/your-icon.png">
<span>loading...</span>
</div>
Here is a full example
Type: boolean
Default: false
The component will not trigger any events while loading
is true
.
It should be true
when data are downloading, and false
when finished.
Type: boolean
Default: false
The component will not trigger infinite-scroll
if true
.
It should be true
when all data have be loaded.
Type: boolean
Default: false
The component will trigger infinite-scroll
once if true
when it has be mounted.
It uses to bootstrap when page first-time loads.
Type: number
Default: 60
Unit: px
Only available for touch*
event, when pull distance is not less than it, pull-down
or pull-up
will be triggered.
Type: number
Default: 0
Unit: px
Sometimes you want to change bottom offset to trigger infinite-scroll
in advance.
Type: array
Default: ['infinite-scroll', 'pull-down', 'pull-up']
The component will not trigger the event if it not in the list.
Type: string
Required: false
All events
bind on window
if it is not set, or you need to specify a container ref
to it.
Emit when container has already scrolled to bottom of window
Emit when container has already pulled down
Emit when container has already pulled up
Display when container has already scrolled to bottom of window and data is loading
Display when distance of pull-down
is less then distance
prop
Display when distance of pull-down
is not less then distance
prop
Display when container has already pull-down
and data is loading
Display when distance of pull-up
is less then distance
prop
Display when distance of pull-up
is not less then distance
prop
Display when container has already pull-up
and data is loading
Display when data is completed
and not loading
# install dependencies
npm install
# serve example with hot reload at localhost:8080
npm run dev
# build vue-data-loading component
npm run dist
FAQs
Another component for infinite scroll and pull down/up to load data.
We found that vue-data-loading demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.