vue 开发间隔式自动滚动组件
项目需求千奇百怪，只能尽其所能实现一二。
因开发vue前端，故此次使用vue开发一个间隔式自动滚动组件，代码如下
<template>
<div id="autoScrll"></div>
</template>
<script>
export default {
name: 'autoScroll',
props: {
ele: HTMLDivElement,// 滚动容器dom元素 必填
step: { // 步进值 正数 非必填 默认 10
type: Number,
default: 10
},
interval: { // 距下一次滚动时间间隔 单位ms 非必填 默认1000ms
type: Number,
default: 1000
},
mode: { // 滚动模式 1：按步进值（step）跳跃式滚动， 2：按照步进值（step）动画方式滚动
type: Number,
default: 1
},
speed: { // 模式2 下可设置滚动速度
type: Number,
default: 25
}
},
data() {
return {
scrollStep: 0, // 由于props中的值不能直接修改，在data中再声明一个变量，用于动态的修改步进值
stopScrollTopFlag: false,
stTimeout: undefined,
stInterval: undefined,
slTimeout: undefined,
slInterval: undefined
}
},
methods: {
autoScrollTop() {
if (this.ele) {
if (!this.scrollStep) {
if (!this.step || isNaN(this.step)) this.scrollStep = 10;
else this.scrollStep = this.step
}
if (!this.interval || isNaN(this.interval)) this.interval = 1000;
if (this.scrollStep < 10 || !this.mode) mode = 1;
const hh = this.ele.offsetHeight;
const hh2 = this.ele.scrollHeight;
if (hh2 > hh) {
let i = 0;
let ss = 0;
let scroll = this.ele.scrollTop;
if (scroll <= 0 || scroll >= (hh2 - hh)) {
scroll = 0;
} else {
i = (scroll / this.scrollStep ) + (scroll % this.scrollStep == 0 ? 0 : 1);
if ((this.scrollStep * i) >= (hh2 - hh)) {
if (scroll % this.scrollStep == 0) {
i = 0;
scroll = 0;
} else {
ss = (this.scrollStep * i) - scroll;
scroll = this.scrollStep * i;
}
}
}
if (this.mode == 1) {
// 开始滚动 每次步进滚动一个step高度
this.stInterval = setInterval(() => {
this.ele.scrollTop = scroll;
if ((hh + scroll) >= hh2) {
scroll = 0;
} else {
scroll += this.scrollStep ;
}
}, this.interval);
} else if (this.mode == 2) {
this.scrollToTop(hh, hh2, i, scroll - ss);
}
}
}
},
scrollToTop(hh, hh2, i, scroll) {
let interval2 = setInterval(() => {
if (!this.stopScrollTopFlag) {
this.ele.scrollTop = scroll;
if ((hh + scroll) >= hh2) {
i = 0;
scroll = 0;
clearInterval(interval2);
this.stTimeout = setTimeout(() => {
if (!this.stopScrollTopFlag) {
this.scrollToTop(hh, hh2, i, scroll);
this.stopScrollTop();
} else {
this.stopScrollTop();
}
}, this.interval);
} else if (scroll >= (this.scrollStep * i)) {
i++;
clearInterval(interval2);
this.stTimeout = setTimeout(() => {
if (!this.stopScrollTopFlag) {
this.scrollToTop(hh, hh2, i, scroll);
this.stopScrollTop();
} else {
this.stopScrollTop();
}
}, this.interval);
} else {
scroll += 2;
}
} else {
clearInterval(interval2);
}
}, this.speed);
},
stopScrollTop () {
if (this.stTimeout) {
clearTimeout(this.stTimeout);
this.stTimeout = undefined;
}
if (this.stInterval) {
clearInterval(this.stInterval);
this.stInterval = undefined;
}
}
}
}
</script>
这里在之前写好的table表格组件中引用，实现表格的自动滚动效果，代码如下：
<template>
<div>
<div class="table-head">
<table class="layui-table" style="">
<colgroup>
<col v-for="(colItem, idx) in cols" :key="'col-' + idx" :style="{width: getColWidth(colItem)}"/>
</colgroup>
<thead>
<tr>
<th
v-for="(colItem, idx2) in cols"
:key="'th-' + idx2"
:style="{textAlign: getAlign(colItem)}"
>{{ colItem.title }}</th>
</tr>
</thead>
</table>
</div>
<div ref="dataTableBox" class="table-body" :style="{height: getHeight()}">
<!-- 重点：使用引入的autoScroll组件 -->
<!-- $refs.dataTableBox 为监听的滚动的容器 dataTableBox 为容器 ref属性对应的值 -->
<auto-scroll ref="autoScroll" :ele="$refs.dataTableBox" :step="0" :interval="1500" :mode="2" />
<table ref="dataTable" class="layui-table" style="background: #0001271a;">
<colgroup>
<col v-for="(colItem, idx3) in cols" :key="'col2-' + idx3" :style="{width: getColWidth(colItem)}"/>
</colgroup>
<!-- <tbody ref="dataTableBody" v-if="data && data.length > 0" @mouseover="stopScroll" @mouseleave="startToScroll"> -->
<!-- 重点：鼠标移入或移动时停止滚动，鼠标移除时继续开始滚动 -->
<tbody ref="dataTableBody" v-if="data && data.length > 0" @mousemove="stopScroll2" @mouseover="stopScroll2" @mouseleave="startToScroll2">
<tr v-for="(dtItem, idx5) in data" :key="'dt-' + idx5" :class="[idx5%2 == 1 ? 'color1' : '']">
<td v-for="(colItem, idx6) in cols" :key="'col3-' + idx6" :style="{textAlign: getAlign(colItem)}">
<div v-if="colItem.type && colItem.type == 'num'">{{ idx5 + 1 }}</div>
<div v-else>{{ dtItem[colItem.field] }}</div>
</td>
</tr>
</tbody>
<tbody v-else>
<tr class="color1">
<td :colspan="cols.length" style="text-align: center;">暂无数据</td>
</tr>
</tbody>
</table>
</div>
<div :class="[isShow==5?'load_more':'load_more1']" v-if="isload">
<div @click="loadMore()">加载更多<img src="../assets/images/loadMore.png" alt=""></div>
</div>
</div>
</template>
<script>
import autoScroll from './autoScroll.vue'
export default {
name: 'tablePy',
components: {autoScroll},
props: {
"cols": {
type: Array,
default: [
{type: "num", title: '序号'},
{field: "field1", title: '字段1'},
{type: "field2", title: '字段2'},
]
},
"data": {
type: Array,
default: []
},
"isload": {
type: Boolean,
default: false
},
"height": {
type: String|Number,
default: 190
}
},
data() {
return {
datas: [],
// autoScroll: autoScroll,
scrollInterval: undefined
}
},
watch: {
data() {
// 重点：监听到表格数据变化时，等待数据表格渲染完成，再开始渲染自动滚动
// this.$refs.autoScroll.scrollStep 动态的修改间歇式滚动的步进值
this.$nextTick(() => {
// this.ele = this.$refs.dataTableBox;
this.$refs.autoScroll.scrollStep = this.$refs.dataTableBody.firstElementChild.offsetHeight;
this.startToScroll2();
});
}
},
methods: {
loadMore() {
this.$emit('loadMore');
return false;
},
getTitle(colItem) {
const title = colItem.title;
if (title) {
return title;
} else {
if (colItem.type && colItem.type == 'num') {
return '序号';
} else {
return colItem.field;
}
}
},
getColWidth(colItem) {
const type = colItem.type;
const width = colItem.width;
if (width) {
if ((width + '').slice(-1) == '%' || (width + '').slice(-2) == 'px') {
return width;
} else {
return width + 'px';
}
} else {
if (type && 'num' == type) {
return 80 + 'px';
} else {
return 'auto';
}
}
},
getAlign(colItem) {
const align = colItem.align;
if (align && ('center' == align || 'left' == align || 'right' == align)) {
return align;
} else {
return left;
}
},
getHeight() {
if ((this.height + '').slice(-1) == '%' || (this.height + '').slice(-2) == 'px') {
return this.height;
} else {
if (Number(this.height) < 90) {
return '90px';
} else {
return this.height + 'px';
}
}
},
stopScroll2() {
// 修改子组件变量值，调用子组件停止滚动方法
this.$refs.autoScroll.stopScrollTopFlag = true;
this.$refs.autoScroll.stopScrollTop();
},
startToScroll2() {
// 调用子组件开始滚动方法
this.$refs.autoScroll.stopScrollTopFlag = false;
this.$refs.autoScroll.autoScrollTop();
}
},
mounted() {
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
this.stopScroll2();
});
}
};
</script>
<style lang="less" scoped>
.table-body {
width: 100%;
overflow-y: auto;
}
.table-body::-webkit-scrollbar {
width: 0;
}
table.layui-table {
margin: 0;
width: 100%;
color: #ffffff;
background: rgba(14, 43, 117, 0.3);
thead {
tr {
background: rgba(14, 43, 117, 0.3);
}
}
// tr {
// width: 100%;
// display: flex;
// overflow: hidden;
// background: rgba(14, 43, 117, 0.5);
// }
th, td {
border: none;
font-size: 16px;
padding: 9px 3px;
}
.color1 {
background: #07164e88;
}
tbody tr:hover {
background: rgba(14, 43, 117, 0.6);
}
}
.load_more {
margin-top: 0.4rem;
width: 110%;
height: 0.45rem;
border: 0.01rem solid #32c5ff;
font-size: 0.16rem;
line-height: 0.45rem;
text-align: center;
cursor: pointer;
margin-bottom: 0.5rem;
color: #32c5ff;
img {
width: 0.2rem;
height: 0.12rem;
}
}
.load_more1 {
margin-top: 0.4rem;
width: 100%;
height: 0.45rem;
border: 0.01rem solid #32c5ff;
font-size: 0.16rem;
line-height: 0.45rem;
text-align: center;
cursor: pointer;
margin-bottom: 0.5rem;
color: #32c5ff;
img {
width: 0.2rem;
height: 0.12rem;
}
}
</style>
代码比较多，第二段中相应的引用和使用方法已做 注明。
目前只写了纵向滚动的，等有时间再补充横向滚动的相关效果
