安装依赖
npm install vue-seamless-scroll --save
安装完成之后进行组件引用
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll
}
参数配置
key | description | default | type |
---|---|---|---|
step |
数值越大速度滚动越快 | 1 |
Number |
limitMoveNum |
开启无缝滚动的数据量 | 5 |
Number |
hoverStop |
是否启用鼠标hover控制 | true |
Boolean |
direction |
方向 0 往下 1 往上 2向左 3向右 | 1 |
Number |
openTouch |
移动端开启touch滑动 | true |
Boolean |
singleHeight |
单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 | 0 |
Number |
singleWidth |
单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 | 0 |
Number |
waitTime |
单步停止等待时间(默认值1000ms) | 1000 |
Number |
switchOffset |
左右切换按钮距离左右边界的边距(px) | 30 |
Number |
autoPlay |
1.1.17版本前手动切换时候需要置为false | true |
Boolean |
switchSingleStep |
手动单步切换step值(px) | 134 |
Number |
switchDelay |
单步切换的动画时间(ms) | 400 |
Number |
switchDisabledClass |
不可以点击状态的switch按钮父元素的类名 | disabled |
String |
isSingleRemUnit |
singleHeight and singleWidth是否开启rem度量 | false |
Boolean |
navigation |
左右方向的滚动是否显示控制器按钮,true的时候autoPlay自动变为false | false |
Boolean |
data() {
return {
classOption: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量
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)
}
}
}
实例
<template>
<vue-seamless-scroll
class="overflow-hidden scroll-list"
:data="list"
:class-option="classOption"
>
<div class="d-flex">
<div
v-for="(item, index) in list"
:key="index"
class="main-top-item d-flex justify-content-between"
>
<div class="main-top-name d-flex justify-content-between flex-column">
<p class="iconfont-bg"><i class="iconfont" v-html="''" /></p>
<p class="main-top-label">{
{ item.monitoType }}</p>
</div>
<div class="main-top-cont d-flex justify-content-between flex-column p-2 ml-3">
<div class="main-top-box d-flex justify-content-between">
<span class="mr-2">本月累计</span>
<span class="text-orange">{
{ item.thisValue }}</span>
</div>
<div class="main-top-box d-flex justify-content-between">
<span class="mr-2">上月累计</span>
<span class="text-blue">{
{ item.lastValue }}</span>
</div>
</div>
</div>
</div>
</vue-seamless-scroll>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
vueSeamlessScroll
},
data() {
return {
list: [],
classOption: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量
hoverStop: true, // 是否开启鼠标悬停stop
direction: 2, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
}
}
</script>
<style lang="scss" scoped>
.overflow-hidden{
overflow: hidden;
}
.scroll-list {
width: 2947px;
height: 108px;
}
</style>