1. 安装
npm install vue-seamless-scroll --save
2. 引入
3. 具体使用
<template>
<div>
<div>
<h3>Vue-seamless-scroll(无限滚动)</h3>
<div class="scroll-table">
<span class="scroll-title">电话簿</span>
<div class="table-head">
<ul>
<li>
<span>姓名</span>
<span>电话</span>
</li>
</ul>
</div>
<vue-seamless-scroll class="scroll-table-body" v-if="listData.length>0" :data="listData" :class-option="defaultOption">
<ul class="scroll-ul">
<li v-for="(item,index) in listData" :key="index">
<span>{
{
item.name}}</span>
<span>{
{
item.phone}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</template>
<script>
// 无限滚动
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: 'PhotoDisplay',
//import 引入组件
components: {
vueSeamlessScroll
},
computed: {
defaultOption() {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
data() {
return {
// 数字滚动
startVal: this.$store.state.count,
endVal: this.$store.getters.doneDoCount,
// 无限滚动
listData: [
{
name: '张三', phone: 13047561910},
{
name: '王五', phone: 13214511215},
{
name: '赵六', phone: 14211312454},
{
name: '李逵', phone: 18012453215},
{
name: '马超', phone: 17712456321},
{
name: '关羽', phone: 15021453699},
],
}
},
methods: {
},
mounted() {
},
}
</script>
<style scoped lang="less">
// 无限滚动
.scroll-table {
width: 500px;
height: 260px;
margin: 0 auto;
background-color: #242455;
color:#48b4ff;
.scroll-title {
border-left: 5px solid red;
}
.table-head {
width: 100%;
ul{
display: flex;
flex-direction: row;
list-style: none;
margin-left: 38px;
span {
margin-right: 130px;
}
}
}
.scroll-table-body {
height: calc(100% - 80px);
overflow: hidden;
ul {
list-style: none;
li {
height: 30px;
margin-top: 5px;
span {
margin-right: 130px;
}
}
}
}
}
</style>