vue實現(xiàn)簡單無縫滾動效果

更新時間：2022年04月08日 11:04:40 作者：橡皮擦不掉的

這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)簡單無縫滾動的具體代碼，供大家參考，具體內(nèi)容如下

效果

實現(xiàn)思路

在vue中如何復(fù)制一份列表出來呢且不能丟失綁定的事件，很簡單使用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() {
? ? //在盒子內(nèi)容高度小于可視高度時不滾動
? ? 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: {
? ? //鼠標(biāo)移入停止?jié)L動 移出繼續(xù)滾動
? ? 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通用）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: