Vue3.0 无缝滚动组件
npm install vue3-seamless-scroll全新升级无缝滚动组件,改为虚拟列表的方式渲染,支持大数据滚动,可以分页请求无限数据滚动,更多使用方式看例子
Vue3.0支持平台一致。
npm
shell
npm install vue3-seamless-scroll --save
`
- Yarn
`shell
yarn add vue3-seamless-scroll
`
- browser
`html
`
组件配置
- list
> 无缝滚动列表数据。
`json
type: Array
required: true
`
- visibleCount
> 满足多少条数据时开启滚动,当每一条数据高度或者宽度一致时组件内会自动计算,否则最好手动指定
`json
type: Number
required: false
`
- v-model
> 通过v-model控制动画滚动与停止,默认开始滚动
`json
type: Boolean,
default: true,
required: false
`
- direction
> 控制滚动方向,可选值up,down,left,right
`json
type: String,
default: "up",
required: false
`
- hover
> 是否开启鼠标悬停
`json
type: Boolean,
default: false,
required: false
`
- step
> 步进速度
`json
type: Number,
default: 0.5,
required: false
`
- singleWaitTime
> 单步停止等待时间(默认值 1000ms)
`json
type: Number,
default: 1000,
required: false
`
- delay
> 动画延时时间
`json
type: Number,
default: 0,
required: false
`
- ease
> 动画效果,可以传入贝塞尔曲线数值
`json
type: String,
default: "cubic-bezier(0.03, 0.76, 1, 0.16)",
required: false
`
- wheel
> 在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启
`json
type: boolean,
default: false,
required: false
`
- singleLine
> 启用单行横向滚动
`json
type: boolean,
default: false,
required: false
`
组件方法
- add(index, values, cb)
> 添加数据、可以添加多个
`json
index: 在原数组什么位置开始添加数据,
values: 要添加的数据,为一个数组,
cb: 添加完后的回调,参数为添加后的完整数组
`
- remove(index, num, cb)
> 删除数据
`json
index: 从原数组什么位置开始移除数据,
num: 移除多少条数据,
cb: 移除完后的回调,参数为移除后的完整数组
`
- update(index, value, cb)
> 更新数据
`json
index: 更新原数组什么位置的元素,
value: 更新后的元素,
cb: 更新完后的回调,参数为更新后的完整数组
`
- reset()
> 重置组件状态,如外层盒子大小改变时需调用该方法重置
事件
- offset(bufferSize, targetList)
> 当缓存数据更新时触发该事件,可以用以做分页更新滚动数据,可以看无限数据滚动例子
`json
bufferSize: 显示缓存数量,
targetList: 原数组
`
- count(count)
> 当滚动完一个周期时触发该事件
`json
count: 滚动完一个周期的次数
`
注意项
> 需要滚动的列表所在容器必须设置样式 overflow: hidden;
使用
$3
- 全局组件注册 install
`JavaScript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');
`
- 单个.vue文件局部注册
`html
`
$3
`html
{{ data.name }}
{{ data.name }}
{{ data.name }}