思路
使用scrollTop动画效果实现自动轮播动效效果
上代码
<div class="scroll_table">
<!-- 列表表头 -->
<div class="table_hader">
<div class="tag1">序号</div>
<div class="tag2">机台名称</div>
<div class="tag3"> 故障等级</div>
<div class="tag4">检测时间</div>
</div>
<!-- 列表循环部分 -->
<div class="table_body" ref="table_bodys">
<div v-for="(item,index) in dataList" :key="index" @click="getItem(item,isShow)" style="cursor: pointer;">
<div :class="getClass(item,index)">
<div class="body1">{{ index+1 }}</div>
<div class="body_cont_box">
<div class="body2">{{ item.name }}</div>
<div class="body3">一</div>
<div class="body4">{{ item.time }}</div>
</div>
</div>
<div class="expand" v-if="item.show">
<div>故障描述:文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
<div>故障类型:类型一 </div>
</div>
</div>
</div>
</div>
js部分
<script>
export default {
components: {
},
// 定义属性
data() {
return {
isScroll: true,
dataList: [
{ name: '机台一', guzang: '6%', time: '2023.12.08',show:false},
{ name: '机台2', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台3', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台4', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台5', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台6', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台7', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台8', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台9', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台10', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台11', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台12', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台13', guzang: '6%', time: '2023.12.08',show:false },
{ name: '机台14', guzang: '6%', time: '2023.12.08',show:false },
],
}
},
watch: {},
methods: {
getClass(row,index){
if(row.show){
return 'data_body'
}else{
return (index%2)==0?'data_body1':'data_body2'
}
},
// 列表点击事件
getItem(row,isShow){
if(this.dataList.length>0){
this.dataList.forEach(item =>{
if(item === row && isShow){
item.show = true
console.log('item.show:'+item.show);
}else{
item.show = false
}
})
this.isShow = !this.isShow
}
},
scroll() {
let isScroll = true //滚动
const tableDom = this.$refs['table_bodys']
//鼠标放上去,停止滚动;移开,继续滚动
tableDom.addEventListener('mouseover', () => {
isScroll = false
})
tableDom.addEventListener('mouseout', () => {
isScroll = true
})
setInterval(() => {
if (isScroll) {
tableDom.scrollTop += 3;
// 当滚动到底部时修改scrollTop回到顶部
if ((tableDom.scrollHeight - (tableDom.clientHeight + tableDom.scrollTop)) < 1 ) {
// tableDom.scrollTop = 0;
let first = tableDom.children[0]
// 删除节点
tableDom.removeChild(first)
// 将该节点拼接到组件最后
tableDom.append(first)
}
}
}, 100)
},
},
created() {
this.tableData = this.getTableData() //表格数据赋值
},
mounted() {
//设置滚动
this.scroll()
},
}
</script>
css部分,我这块的scroll_table是整个列表最外层的div,使用的宽高都是百分比,更改成自己的需要就行
.scroll_table{
position: absolute;
bottom: 0%;
width: 100%;
height: 83.5%;
.table_hader{
width: 100%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
.tag1{
width: 15%;
height: 100%;
text-align: center;
}
.tag2{
width: 30%;
height: 100%;
text-align: center;
}
.tag3{
width: 25%;
height: 100%;
text-align: center;
}
.tag4{
width: 30%;
height: 100%;
text-align: center;
}
}
.table_body{
width: 100%;
height: 90%;
overflow: hidden;
overflow-y: scroll;
color: #FFF;
&::-webkit-scrollbar {
width: 0;
}
.data_body{
height:40px;
display: flex;
justify-content: center;
align-items: center;
// background-color:#B39A41;
// background-image: radial-gradient(ellipse, rgb(179,154,65,0.3), #B39A41);
border: 2px solid #FFE661;
.body1{
width: 15%;
line-height: 40px;
text-align: center;
background-image: radial-gradient(ellipse, rgb(179,154,65,0.3), #B39A41);
border-right:2px solid #FFE661;
}
.body_cont_box{
display: flex;
width: 85%;
background-image: radial-gradient(ellipse, rgb(179,154,65,0.3), #B39A41);
.body2{
width: 35%;
line-height: 40px;
text-align: center;
}
.body3{
width: 30%;
line-height: 40px;
text-align: center;
}
.body4{
width: 35%;
line-height: 40px;
text-align: center;
}
}
}
.data_body1{
height:40px;
display: flex;
justify-content: center;
align-items: center;
background-color:rgb(57, 198, 172,0.18);
.body1{
width: 15%;
line-height: 40px;
text-align: center;
}
.body_cont_box{
width: 85%;
display: flex;
.body2{
width: 35%;
line-height: 40px;
text-align: center;
}
.body3{
width: 30%;
line-height: 40px;
text-align: center;
}
.body4{
width: 35%;
line-height: 40px;
text-align: center;
}
}
}
.data_body2{
height:40px;
display: flex;
justify-content: center;
align-items: center;
.body1{
width: 15%;
line-height: 40px;
text-align: center;
}
.body_cont_box{
width: 85%;
display: flex;
.body2{
width: 35%;
line-height: 40px;
text-align: center;
}
.body3{
width: 30%;
line-height: 40px;
text-align: center;
}
.body4{
width: 35%;
line-height: 40px;
text-align: center;
}
}
}
.expand{
width: 100%;
background-color: rgb(255, 230, 97,0.18);
div{
width: 100%;
line-height: 30px;
}
}
}
}
实现后的效果点击图