Vue实现列表的无缝滚动功能
直接上代码
codePen地址
<template><div id="app"><div class="list" @mouseenter="mouseEnter" @mouseleave="mouseLeave"><divclass="list-box"ref="listRef":style="{ transform: `translateY(${scrollTop}px)` }"><div class="list-item" v-for="(item, index) in list" :key="index"><span :class="[`item-${index}`, 'item-name']">No.{{ index + 1 }}</span><span class="item-content">{{ item.text }}</span></div><div class="list-item" v-for="(item, index) in list" :key="index + 100"><span :class="[`item-${index}`, 'item-name']">No.{{ index + 1 }}</span><span class="item-content">{{ item.text }}</span></div></div></div></div>
</template><script>
export default {data() {return {list: [{text: "1-实时播报"},{text: "2-实时播报"},{text: "3-实时播报"},{text: "4-实时播报"},{text: "5-实时播报"},{text: "6-实时播报"},{text: "7-实时播报"},{text: "8-实时播报"},{text: "9-实时播报"},{text: "10-实时播报"}],scrollTop: 0,boxDomHeight: 0,clearInt: null};},mounted() {this.$nextTick(() => {this.handleLoop();});},methods: {// 自动滚动handleLoop() {const getItem = document.querySelector(".list-item");this.boxDomHeight = (getItem.clientHeight + 10) * this.list.length;this.handleInterval();},handleInterval() {this.clearInt = setInterval(() => {this.scrollTop -= 1;if (this.scrollTop * -1 >= this.boxDomHeight) {this.scrollTop = 0;}}, 10);},// 鼠标移入mouseEnter() {clearInterval(this.clearInt);},// 鼠标移出mouseLeave() {this.handleInterval();}},beforeUnmount() {clearInterval(this.clearInt);}
};
</script><style lang="scss">
.list {overflow: hidden;height: 300px;
}.list-item {margin-bottom: 10px;background-size: 100% 100%;font-size: 14px;display: flex;align-items: center;background-color: rgba(3, 42, 50, 0.4);border-radius: 6px;cursor: pointer;height: 40px;line-height: 40px;
}
.item-name {font-weight: 700;color: #ffffff;text-align: center;width: 50px;margin-right: 10px;background-color: #01707d;border-top-left-radius: 6px;border-bottom-left-radius: 6px;&.item-0 {background-color: #991a33;}&.item-1 {background-color: #d19e3d;}
}
.item-content {flex: 1;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-weight: 200;color: #fff;
}
</style>
