官网地址:vue-seamless-scroll
演示地址: vue-seamless-scroll演示地址
实例:
<template>
...
<div class="table-container" style="width: 78%;transform: translateY(4%);">
<table class="fixed-header-table">
<thead>
<tr>
<th>线路</th>
<th>计划量</th>
<th>实际发运量</th>
</tr>
</thead>
</table>
<!--每一行都有点击事件,实现方式: 使用 @click="scrollClick($event)"的方式在外层父元素上添加点击事件来获取点击的子dom的方式-->
<div class="table-body-container" @click="showDetailModal($event)" @mouseover="changeCursor">
<!-- @mousewheel.native.prevent监听了滚轮事件,并使用.prevent修饰符来阻止事件的默认行为 (防止因为鼠标滚轮,出现大面积空白现象) -->
<vue-seamless-scroll :data="dataList" class="line-table" :class-option="optionSetting" @ScrollEnd="ScrollEnd" @mousewheel.native.prevent="">
<!--行样式设定 -->
<!--情况1: 数据个数为偶数时: 按奇偶行显示样式 -->
<!--情况2: 数据个数为奇数时: 根据回调函数ScrollEnd,设定oddFlag值,动态改变奇偶行显示样式 (PS: 有问题, ScrollEnd回调比页面渲染慢....不知道咋搞了)-->
<div v-for="(item, index) in dataList" :key="index.toString()"
:class="dataList % 2 == 0 ? ((index + 1) % 2 == 0 ? 'even-tr' : 'odd-tr') : (oddFlag ? ((index + 1) % 2 == 0 ? 'even-tr' : 'odd-tr') :
((index + 1) % 2 == 0 ? 'odd-tr' : 'even-tr'))">
<spanclass="cell">{{ item.line}}</span>
<spanclass="cell">{{ item.planWeight }}</span>
<spanclass="cell">{{ item.actualWeight}}</span>
</div>
</vue-seamless-scroll>
</div>
</div>
...
</template>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
vueSeamlessScroll,
},
//如果组件提供了ref属性,你也可以通过$refs来获取组件实例,然后添加事件监听器来禁用滚轮控制。
//mounted() {
//this.$refs.scrollContainer.$el.addEventListener('mousewheel', this.preventScroll, {
//passive: false,
//});
//},
data() {
return {
dataList: [
{line: "线路1", planWeight: 10, actualWeight: 11},
{line: "线路2", planWeight: 20, actualWeight: 22},
{line: "线路3", planWeight: 30, actualWeight: 33},
{line: "线路4", planWeight: 40, actualWeight: 44},
{line: "线路5", planWeight: 50, actualWeight: 55},
{line: "线路6", planWeight: 60, actualWeight: 66},
{line: "线路7", planWeight: 70, actualWeight: 77},
{line: "线路8", planWeight: 80, actualWeight: 88},
{line: "线路9", planWeight: 90, actualWeight: 99}
],
oddFlag: false,
}
},
computed:{
//控制滚动属性
optionSetting(){
return{
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
autoPlay: true, // 是否自动滚动
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
},
},
methods: {
//preventScroll(event) {
//event.preventDefault();
//},
ScrollEnd: function(){
this.oddFlag = !this.oddFlag
},
showDetailModal($event){
const parentElement = $event.target.parentNode; // 获取当前子节点的父节点
const lineName = parentElement.children[0].innerText //获取当前点击行的线路名称
.......
},
},
};
vue2插件vue-seamless-scroll,实现循环