Vue2 滚动列表

<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>