vue 使用el-table 循环轮播数据列表
因为是在内网开发,安装插件导包进去非常麻烦,有条件的可以去下载插件实现,咱这里贴一下手撸的代码。
需要实现的效果大抵如下:(手机拍的,有些糊)
大部分实现的是监听是否到了div的底部,如果到了底部,就直接跳到顶部,这种体验感不是特别好,没有达到轮播的真正效果。
表格数据,devData我绑定了个空数组,因为实在是懒得敲了,按道理排名也应该是从api获取,而不是拿index。
<template>
<div>
<el-table
:data="devData"
style="width: 100%">
<el-table-column label="排名">
<template slot-scope="scope">
<span>第{
{scope.$index +1}}名</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="日期">
</el-table-column>
<el-table-column
prop="scale"
label="姓名">
</el-table-column>
</el-table>
</div>
</template>
<script>
export defalut {
dsta() {
return {
devData: []
}
}
}
</script>
export default{
created() {
var isScroll = true // 也可以定义到data里
this.$nextTick(() => {
let div = document.getElementsByClassName(el-table__body-wrapper)[0]
div.style.height = 110px
div.addEventListener(mouseenter, () => {
isScroll = false
})
div.addEventListener(mouseleave, () => {
idScroll = true
})
let t = document.getElementsByClassName(el-table__body)[0]
setInterval(() =>{
if(isScroll) {
let data = this.devData[0]
setTimeout(() => {
this.devData.push(data)
t.style.transition = all .5s
t.style.marginTop = -41px
}, 500)
setTimeout(() =>{
this.devData.splice(0,1)
t.style.transition = all 0s ease 0s
t.style.marginTop = 0
}, 1000)
}
}, 2500)
})
}
}
总结
下一篇:
关于Xftp7的下载和安装
