vue3-scroll-list-lsq
v0.0.1
Published
纵向循环滚动列表
Downloads
5
Readme
1. scrollList
列表循环自动从上往下滚动,鼠标悬浮停止滚动,然后可以滚动鼠标去滚动列表。
1.1 props 属性
| 名称 | 类型 | 描述 | 默认值 | | -------------- | ------- | ------------------ | ------ | | list | array | 列表的数组数据 | [] | | limitScrollNum | int | 开始滚动的最小条数 | 5 | | step | number | 滚动速度 | 0.5 | | copyNum | int | 列表复制数据的份数 | 1 | | isScroll | Boolean | 是否开启自动滚动 | true |
1.2 slot 插槽
| 名称 | 描述 | | ------- | -------- | | default | 默认插槽 |
示例
<script>
import { defineComponent } from 'vue';
import vue3-scroll-list-lsq from 'vue3-scroll-list-lsq';
export default defineComponent({
name: 'ServeDev',
components: {
vue3-scroll-list-lsq,
},
setup() {
return {
list: [
{ name: '我是描述信息1' },
{ name: '我是描述信息2' },
{ name: '我是描述信息3' },
{ name: '我是描述信息4' },
{ name: '我是描述信息5' },
{ name: '我是描述信息6' },
{ name: '我是描述信息7' },
{ name: '我是描述信息8' },
{ name: '我是描述信息9' },
{ name: '我是描述信息10' },
],
};
},
});
</script>
<template>
<div id="app">
<p>我是滚动列表</p>
<vue3-scroll-list-lsq class="scroll-list" :list="list" style="height: 200px">
<div class="item" v-for="(item, index) in list" :key="index">
{{ item.name }}
</div>
</vue3-scroll-list-lsq>
</div>
</template>
<style scoped>
#app {
padding: 30px 60px;
box-sizing: border-box;
background: #02091e;
color: #fff;
}
.scroll-list {
background: #062152;
}
.item {
line-height: 30px;
padding: 4px 10px;
border-bottom: 1px solid #333;
}
</style>