vue怎么实现简单无缝滚动效果

本篇内容介绍了“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>

“vue怎么实现简单无缝滚动效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！