vue 实现 滚动 dev列表、table列表
发布时间
阅读量：
阅读量
vue 实现 滚动 dev列表、table列表
- 滚动 div 列表
- 滚动 table 列表
效果图
滚动 div 列表
完整的代码
<template>
<div>
<!-- 把头部提出来 -->
<div>
<ul class="table-list">
<li>
<span>工种类别</span>
<span>年龄</span>
</li>
</ul>
</div>
<div style="overflow-y: hidden;"
@mouseover="stopScroll" @mouseleave="leaveScroll">
<ul class="table-list scroll-content" v-if="policyBeingdeclaredList.length>0" :style="top">
<li v-for="(item,index) in policyBeingdeclaredList" :key="index" :ref="`edzcxmTr${index}`">
<span>{{ item.name }}</span>
<span>{{ item.dept_name }}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
var _this
export default {
props: {
moveDistance: {//移动距离
type: Number,
default: 77
}
},
data() {
return {
policyBeingdeclaredList: [
{name: "电工班1", dept_name: "18%"},
{name: "电工班2", dept_name: "28%"},
{name: "电工班3", dept_name: "38%"},
{name: "电工班4", dept_name: "48%"},
{name: "电工班5", dept_name: "58%"},
{name: "电工班6", dept_name: "68%"},
{name: "电工班7", dept_name: "78%"}
],
top: "top: -0px;",
activeIndex: 0,
edzcxmTrHeight: 0,
};
},
methods: {
//鼠标悬停，停止滚动
stopScroll() {
console.log("鼠标悬停，停止滚动");
clearInterval(this.scrollTime)
},
//鼠标移出 滚动条回到顶部,接着滚动
leaveScroll() {
this.top = "top: 0px";
this.activeIndex = 0;
this.edzcxmTrHeight = 0;
this.scroll()
},
//循环滚动（每1.5秒滚动一次）
scroll() {
//定时器
this.scrollTime = setInterval(function () {
//此处里面的对象指向必须要用全局定义的_this
//自定义滚动
console.log("此时此刻的activeIndexOne为:", _this.activeIndex, _this.policyBeingdeclaredList.length);
if (_this.activeIndex < _this.policyBeingdeclaredList.length) {
_this.activeIndex += 1;
//方式二（计算动态高度）
let edzcxmTrIndex = _this.activeIndex - 1
_this.edzcxmTrHeight += _this.$refs[`edzcxmTr` + edzcxmTrIndex][0].offsetHeight;
} else {
_this.activeIndex = 0;
_this.edzcxmTrHeight = 0;
}
//重新渲染top的距离
//方式一（使用固定高度进行移动）
//_this.top = "top: " + -_this.activeIndex * _this.moveDistance + "px"; //定义移动的单元高度
//console.log("方式一:移动距离:",_this.top);
//方式二（使用动态高度进行移动）
_this.top = "top: " + -_this.edzcxmTrHeight + "px"; //定义移动的单元高度
console.log("方式二（使用动态高度进行移动）:", _this.top);
}, 1000)
},
},
computed: {},
mounted() {
//等于全局this
_this = this;
//在组件的DOM元素挂载到页面之后执行这些操作
this.$nextTick(() => {
this.scroll()
})
},
//生命周期 - 销毁之前
beforeDestroy() {
//页面销毁的时候清除掉定时任务
clearInterval(this.scrollTime);
},
};
</script>
<style lang="scss" scoped>
//重点样式为这个
.scroll-content {
//自定义滚动 间隔时间和方向
position: relative;
transition: top 0.5s; //向上移动
}
/* 模拟表格的样式 */
.table-list {
display: table;
width: 100%;
border-collapse: collapse;
font-size: 30px;
}
.table-list li {
display: table-row;
}
.table-list li > span {
display: table-cell;
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
/* 表头样式 */
.table-list li:first-child > span {
background-color: #f2f2f2;
font-weight: bold;
}
/* 奇偶行斑马线效果 */
.table-list li:nth-child(even) {
background-color: #f9f9f9;
}
</style>
html
关键点为
一：属性方面
- 高度属性
- overflow-y 属性（当设置为 auto 时会显示内容，默认情况下会被隐藏）
- scroll-content 样式定义
- ：：style 属性值为 'top'
- 引用命名规则 （其中
edzcxmTr${key}是用于捕获方式二中动态尺寸变化的变量名）
其中的 @mouseover 和 @mouseleave 用于监控鼠标移动操作，并被用来实现"暂停"功能；具体实施取决于业务需求。
二：获取top方式
有两种主要的获取top的方法
当列表呈现高度统一的状态时可以直接使用
当列表的高度存在差异时 文字自动换行可能导致某一行出现较大的高度 因此需要采用动态捕获的方式
三：transition(动画过渡) 的设置
在动画过渡(transition)内部的时间设置与定时任务执行时间不要相同，在同一时段内完成不同动作会提升整体效果
滚动 table 列表
只需要注意一下template的table参数的写法，script部分都一样
该表格采用CSS固定布局时，在某些情况下可能会出现轻微的抖动现象，这可能导致整体视觉效果出现问题。因此我对此提出优化建议。
<template>
<div>
<!-- 表格通过css固定还是会出现抖动，导致视觉上面有溢出现象，所以我这边把“头部”提出来-->
<table>
<thead>
<tr>
<th >项目名称</th>
<th>主管部门</th>
</tr>
</thead>
</table>
<div style="height: calc(100% - 40px);overflow-y: hidden;" @mouseover="stopScroll" @mouseleave="leaveScroll">
<table class="scroll-content" :style="top">
<!-- <thead> -->
<!-- <tr>-->
<!-- <th style="width: 55%;">项目名称</th>-->
<!-- <th>主管部门</th>-->
<!-- </tr>-->
<!-- </thead>-->
<tbody>
<tr v-for="(item, key) in policyBeingdeclaredList " :key="key" :ref="`edzcxmTr${key}`">
<td>{{ item.name }}</td>
<td>{{ item.dept_name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
html
 <style lang="scss" scoped>
//重点样式为这个
.scroll-content {
//自定义滚动 间隔时间和方向
position: relative;
transition: top 0.5s; //向上移动
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
/* 表头样式 */
th {
background-color: #f2f2f2;
font-weight: bold;
}
/* 奇偶行斑马线效果 */
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
html
1
全部评论 (0)
还没有任何评论哟~