vue实现无缝滚动
效果
实现思路
在vue中如何复制一份列表出来呢且不能丢失绑定的事件,很简单使用slot插槽,使用两个插槽我们就拥有了两个列表
<div class="listScroll" ref="box">
<slot></slot>
<slot></slot>
</div>
组件完整代码
<template>
<div class="listScroll" ref="box">
<slot></slot>
<slot></slot>
</div>
</template>
<script>
export default {
name: "listScroll",
created() {},
mounted() {
//在盒子内容高度小于可视高度时不滚动
if (this.boxHeight < this.ele0.clientHeight) {
this.start(this.height);
this.setEvet();
} else {
this.isScroll = false;
}
},
props: {
speed: {
default: 1,
type: Number,
},
},
computed: {
//第一个slot
ele0() {
return this.$refs.box.children[0];
},
//第二个slot
ele1() {
return this.$refs.box.children[1];
},
//盒子的可视高度
boxHeight() {
return this.$refs.box.clientHeight;
},
},
data() {
return {
height: 0,
isScroll: true,
};
},
methods: {
//鼠标移入停止滚动 移出继续滚动
setEvet() {
this.$refs.box.onmouseenter = () => {
this.isScroll = false;
// this.height = 0;
};
this.$refs.box.onmouseleave = () => {
this.isScroll = true;
this.$nextTick(() => {
this.start(this.height);
});
};
},
//滚动方法
start(height) {
this.ele0.style = `transform:translateY(-${height}px);`;
this.ele1.style = `height:${this.boxHeight}px;transform:translateY(-${height}px);overflow: hidden;`;
if (height >= this.ele0.clientHeight) {
this.height = 0;
} else {
this.height = this.speed;
}
if (!this.isScroll) return;
window.requestAnimationFrame(() => {
this.start(this.height);
});
},
},
};
</script>
<style lang="less" scoped>
.listScroll {
overflow: hidden;
}
.hover {
overflow-y: auto;
}
.hide {
display: none;
}
</style>
使用
<template>
<div class="scroll">
<list-scroll class="box" :speed="1">
<div class="list">
<div class="item" v-for="item in list" :key="item.xh">
<span>{{ item.xh }}</span
><span>{{ item.label }}</span>
</div>
</div>
</list-scroll>
</div>
</template>
<script>
import ListScroll from "@/components/listScroll";
export default {
name: "scroll",
components: { ListScroll },
data() {
return {
list: new Array(10)
.fill(1)
.map((s, i) => ({ xh: i 1, label: "hello wrold" })),
};
},
};
</script>
<style lang="less" scoped>
.box {
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>
至此一个简单的无缝滚动就完成了(vue2和vue3通用)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbeaif
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01