vue-seamless-scroll介绍
vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动,单步滚动,以及支持水平方向的手动切换功能
安装
***Npm ***
npm install vue-seamless-scroll --save
引入组件
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll
},
配置参数
// 监听属性 类似于data概念
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)
}
}
},
<vue-seamless-scroll v-if="tempArray.length>=1" :data="tempArray" class="seamless-warp" :class-option="defaultOption" >
<ul class="ul-scoll">
<li v-for="(item, index) in tempArray" :key='index'>
<div class="item" >
<div :class="((item.Isnormal=='断联')||(item.Isnormal=='异常'))?'top top-1':'top top-2'"><span>{{index+1}}</span> </div>
<div class="pro-name" :data-id="index" :data-index="item.C_Code" :data-model="item">{{item.C_Code}}</div>
<div class="pro-name">{{item.C_TaskNum}}</div>
<div class="num">{{item.C_Location}}</div>
<div class="num">{{item.Isnormal}}</div>
<div class="num">{{item.C_Status}}</div>
<div class="num">{{item.C_IsLock}}</div>
<div class="num">{{item.C_Electricity}}</div>
</div>
</li>
</ul>
</vue-seamless-scroll>