使用
<template> <vue-seamless-scroll :data="data" :class-option="classOption" class="seamless-warp"> <ul class="item"> <li v-for="item in data"> <div>{{item.title}}</div> </li> </ul> </vue-seamless-scroll> </template> <style lang="scss" scoped> .seamless-warp { height: 100px; //需要给父容器一个height,左右滚动需要给ul容器一个初始化width。 overflow: hidden; } </style> <script> export default { data () { return { data: [{ 'title': '第一行', }, { 'title': '第二行', }, { 'title': '第三行', }, { 'title': '第四行' }] } }, computed: { classOption () { //配置项 return { step: 0.3, //数值越大速度滚动越快 limitMoveNum: 5, //开始无缝滚动的数据量 //this.fourDatata.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) } } } } </script>