<template>
<div class="ItemScroll" ref="card">
<slot></slot>
<slot></slot>
</div>
</template>
<script>
export default {
name: "ItemScroll",
created() {},
props: {
// 控制动画滚动 速度
speed: {
default: 1,
type: Number,
},
// 控制 鼠标移入滚动停止功能
isMouseControl: {
default: true,
type: Boolean,
},
// 控制 滚动到底部是跳到下一页 还是无缝循环滚动
isNextPage: {
default: false,
type: Boolean,
},
},
mounted() {
this.start(this.height);
// 根据props 控制鼠标移入功能
if (this.isMouseControl) {
this.setEvet();
}
},
computed: {
//第一个slot
ele0() {
return this.$refs.card.children[0];
},
//第二个slot
ele1() {
return this.$refs.card.children[1];
},
//盒子的可视高度
cardHeight() {
return this.$refs.card.clientHeight;
},
},
data() {
return {
height: 0,
isScroll: true,
};
},
methods: {
//鼠标移入停止滚动 移出继续滚动
setEvet() {
this.$refs.card.onmouseenter = () => {
this.isScroll = false;
};
this.$refs.card.onmouseleave = () => {
this.isScroll = true;
this.$nextTick(() => {
this.start(this.height);
});
};
},
//滚动方法
start(height) {
this.ele0.style = `transform:translateY(-${height}px);`;
this.ele1.style = `height:${this.cardHeight}px;transform:translateY(-${height}px);overflow: hidden;`;
if (height >= this.ele0.clientHeight) {
// 判断滚动到底部是跳到下一页 还是无缝循环滚动
if (this.isNextPage) {
// 让父组件跳到下一页
this.$emit("nextPage", "hello");
} else {
this.height = 0;
}
} else {
this.height += this.speed;
}
if (!this.isScroll) return;
window.requestAnimationFrame(() => {
this.start(this.height);
});
},
},
};
</script>
<style lang="less" scoped>
.ItemScroll {
overflow: hidden;
}
.hover {
overflow-y: auto;
}
.hide {
display: none;
}
</style>
<template>
<div class="scroll">
<ItemScroll
class="card"
:speed="1"
ref="ItemScroll"
>
<div class="list">
<div class="item" v-for="item in dataList" :key="item.time">
<span>{{ item.label }}</span>
<span>{{ item.time }}</span>
</div>
</div>
</ItemScroll>
</div>
</template>
<script>
import ItemScroll from "@/components/ItemScroll";
export default {
name: "HomeView",
components: { ItemScroll },
data() {
return {
dataList: [
{label: "恭喜发财", time: "20240122"},
{label: "恭喜发财", time: "20240123"},
{label: "恭喜发财", time: "20240124"},
{label: "恭喜发财", time: "20240125"},
{label: "恭喜发财", time: "20240126"},
{label: "恭喜发财", time: "20240127"},
{label: "恭喜发财", time: "20240128"},
{label: "恭喜发财", time: "20240129"},
{label: "恭喜发财", time: "20240110"},
{label: "恭喜发财", time: "20240111"},
],
// 控制 切换下一页是丝滑切换数据 还是回到顶部再滚动
isSmoothSwitch:false
};
},
};
</script>
<style lang="less" scoped>
.card {
height: 300px;
}
.list {
padding: 0 10px;
width: 300px;
.item {
display: flex;
justify-content: space-between;
padding: 5px 0;
cursor: pointer;
&:hover {
background-color: #95a5a6;
}
}
}
</style>