The vue version is “^2.6.11” and the jquery version is “^1.12.4”
The following code is a component. You need to create a new container on the page you are using and put this component in it. It is suitable for large-screen pages that require highly adaptive scrolling lists
The effect is as follows:
The implementation code is as follows:
<template>
<div class="announcement">
<div class='announcement-table-list-content'>
<ul class="table-list">
<li v-for="(item, key) in scrollListData" :key="key">
<div class="flex">
<div class="dot"></div>
<span v-if="item.isAttention" class="tag">Attention</span>
<div class="text">{<!-- -->{ item.text }}</div>
</div>
<span class="date">{<!-- -->{ item.date }}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
import $ from "jquery";
export default {
data() {
return {
scrollListData: [
{
isAttention: true,
text: 'The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day. The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day',
date: 'July 10',
},
{
isAttention: false,
text: 'The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day. The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day',
date: 'July 10',
},
{
isAttention: false,
text: 'The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day. The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day',
date: 'July 10',
},
{
isAttention: false,
text: 'The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day. The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day',
date: 'July 10',
},
{
isAttention: false,
text: 'The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day. The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day',
date: 'July 10',
},
{
isAttention: true,
text: 'The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day. The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day',
date: 'July 10',
},
{
isAttention: true,
text: 'The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day. The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day',
date: 'July 10',
},
{
isAttention: false,
text: 'The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day. The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day',
date: 'July 10',
},
{
isAttention: false,
text: 'The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day. The system is expected to make a system maintenance announcement from 19:00 on September 9, 2022 to 07:00 the next day',
date: 'July 10',
},
],
analysisInterval: null,
ceilHeight: 0,
scrollNum: 7, //The number of rows in the display list
};
},
mounted() {
this.$nextTick(()=> {
// When the height of the page changes, the list will also change.
window.addEventListener("resize", this.resize);
this.playList();
})
},
methods: {
playList() {
let box = document.getElementsByClassName('announcement-table-list-content')[0]
// Calculate the height of each row
this.ceilHeight = Math.floor(box.clientHeight/this.scrollNum) + 'px'
clearInterval(this.analysisInterval)
//Set the height of each row
$('.announcement-table-list-content li').css('height',this.ceilHeight)
let _this = this;
let className = ".announcement-table-list-content";
this.play();
$(className).hover(
function () {
clearInterval(_this.analysisInterval);
},
function () {
_this.play();
}
);
},
play() {
let _this = this;
let className =
".announcement-table-list-content .table-list";
let child_className = className + " " + "li:first";
if (this.scrollListData.length > this.scrollNum) {
this.analysisInterval = setInterval(function () {
$(className).animate(
{
top: '-' + _this.ceilHeight,
},
500,
function () {
$(this).append($(child_className));
$(this).css("top", "0");
}
);
}, 4000);
}
},
resize() {
let box = document.getElementsByClassName('announcement-table-list-content')[0]
this.ceilHeight = Math.floor(box.clientHeight/this.scrollNum) + 'px'
this.playList();
},
},
destroyed() {
// Clear the timer when the page is destroyed
clearInterval(this.analysisInterval);
this.analysisInterval = null
window.removeEventListener("resize", this.resize);
}
}
</script>
<style lang="scss" scoped>
.announcement {
width: 100%;
height: 90%;
padding: 1%;
.announcement-table-list-content {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
.table-list {
width: 100%;
padding: 0;
position: absolute;
}
}
li {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E6E9F0;
font-size: 16px;
// height: 40px;
.flex {
display: flex;
align-items: center;
}
.dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 5px;
background: #0071FF;
margin-right: 5px;
}
.text {
color: #333333;
}
.tag {
border-radius: 4px;
background: #F7BA1E33;
color: #F7BA1E;
padding: 2px 4px;
margin-right: 5px;
}
.date {
color: #999999;
}
}
}
</style>
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeHomepage Overview 39468 people are learning the system