预览

安装

npm install @oldeng/v-infinite-scroll

使用

import { VInfoniteScroll } from '@oldeng/v-infinite-scroll'
//局部注册

或者

import { VInfoniteScroll } from '@oldeng/v-infinite-scroll'
Vue.use(VInfoniteScroll)

参数

参数名	取值范围	说明
isStart	Boolean	是否开始滚动
row	Number	垂直滚动列表中显示行数
col	Number	垂直滚动列表中显示行数
maxCache	Number	最大缓存数据
direction	"horizontal"或“vertical”	垂直滚动列表中显示行数
interval	Number	滚动间隔毫秒值（ms）
#范例

1. 水平滚动
2. 垂直滚动

详细代码参考源码中Demo代码

水平滚动

    <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>

垂直滚动

    <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>

调试

源码调试需要开启vmock插件模拟接口数据

运行vmock

模拟数据服务默认端口为8000

npm run vmock

npm地址

npm传送门

Github地址

源码传送门