預(yù)覽
scroll-preview.gif
安裝
npm install @oldeng/v-infinite-scroll
使用
import { VInfoniteScroll } from '@oldeng/v-infinite-scroll'
//局部注冊(cè)
或者
import { VInfoniteScroll } from '@oldeng/v-infinite-scroll'
Vue.use(VInfoniteScroll)
參數(shù)
| 參數(shù)名 | 取值范圍 | 說(shuō)明 |
|---|---|---|
| isStart | Boolean | 是否開始滾動(dòng) |
| row | Number | 垂直滾動(dòng)列表中顯示行數(shù) |
| col | Number | 垂直滾動(dòng)列表中顯示行數(shù) |
| maxCache | Number | 最大緩存數(shù)據(jù) |
| direction | "horizontal"或“vertical” | 垂直滾動(dòng)列表中顯示行數(shù) |
| interval | Number | 滾動(dòng)間隔毫秒值（ms） |
范例
- 水平滾動(dòng)
- 垂直滾動(dòng)
詳細(xì)代碼參考源碼中Demo代碼
水平滾動(dòng)
<div class="horizental-wraper">
<v-infinite-scroll
direction="horizontal"
ref="infinite-scroll"
:maxCache="15"
:isStart="isStart"
:col="5"
>
<template #up="{ up }">
<div class="col up" v-for="(col, index) in up">{{col}}</div>
</template>
<template #down="{ down }">
<div class="col down" v-for="(col, index) in down">{{col}}</div>
</template>
</v-infinite-scroll>
</div>
垂直滾動(dòng)
<div class="text-list">
<v-infinite-scroll ref="infinite-scroll" :interval="5000" :isStart="isStart" :row="5">
<template #up="{ up }">
<div
:class="['col','up', clazz[index]]"
v-for="(col, index) in up"
:style="stateColor(index, col)"
:key="index"
>{{col}}</div>
</template>
<template #down="{ down }">
<div
:class="['col','up', clazz[index]]"
v-for="(col, index) in down"
:style="stateColor(index, col)"
:key="index"
>{{col}}</div>
</template>
</v-infinite-scroll>
</div>
