子组件：TimePage.vue

效果图

<template>
  <div class="click-scroll-X">
    <!-- 上 -->
    <!-- eslint-disable-next-line  -->
    <span class="left_btn" :disabled="pageNo == 1" @click="leftSlide"><</span>
    <!-- 中间 -->
    <div class="scroll_wrapper" ref="wrapperCon">
      <div class="scroll_list">![在这里插入图片描述](https://img-blog.csdnimg.cn/e75ad999561c4016bad4f13b9b447537.png)

        <div
          class="item"
          :class="{ active: pageNo == item.value }"
          @click="clickItem(item)"
          v-for="(item, index) in timeList"
          :key="index"
        >
          {{ item.label }}
        </div>
      </div>
    </div>

    <!-- 下 -->
    <span
      class="right_btn"
      :disabled="clickValue.value == timeList.length"
      @click="rightSlide"
      :class="{ active: pageNo == clickValue.value + 1 }"
    >
      >
    </span>
    <button>前往</button>
    <button>00</button>: <button>30</button>
  </div>
</template>

<script>
export default {
  name: "TimePage",
  props: ["timeList", "pageNo"],
  data() {
    return {
      clickValue: {},
    };
  },
  methods: {
    clickItem(item) {
      console.log(item, "item-----");
      this.clickValue = item;
      // let timeLength = this.timeList.length; //时间段个数
      this.$emit("getPageNo", this.clickValue);
    },
    // 左箭头
    leftSlide() {
      // 保存滚动盒子左侧已滚动的距离
      let left = this.$refs.wrapperCon.scrollLeft;
      let num = 0;
      clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(() => {
        //   !left:已经滚动到最左侧
        //   一次性滚动距离（可调节）
        if (!left || num >= 360) {
          // 停止滚动
          clearInterval(this.timer);
          this.timer = null;
          return;
        }
        // 给滚动盒子元素赋值向左滚动距离
        this.$refs.wrapperCon.scrollLeft = left -= 30;
        // 保存向左滚动距离（方便判断一次性滚动多少距离）
        num += 30;
      }, 20);
      // 20：速度（可调节）
    },
    // 右箭头
    rightSlide() {
      // 保存滚动盒子左侧已滚动的距离
      let left = this.$refs.wrapperCon.scrollLeft;

      // 保存元素的整体宽度
      let scrollWidth = this.$refs.wrapperCon.scrollWidth;
      // 保存元素的可见宽度
      let clientWidth = this.$refs.wrapperCon.clientWidth;
      console.log(left, scrollWidth, clientWidth, "left999999");
      let num = 0;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        // 已经滚动距离+可见宽度
        // left+clientWidth>=scrollWidth：滚动到最右侧
        // num>=300一次性滚动距离
        if (left + clientWidth >= scrollWidth || num >= 360) {
          clearInterval(this.timer);
          return;
        }
        // 给滚动盒子元素赋值向左滚动距离
        this.$refs.wrapperCon.scrollLeft = left += 30;
        console.log(
          this.$refs.wrapperCon.scrollLeft,
          " this.$refs.wrapperCon.scrollLeft----"
        );
        // 保存向左滚动距离（方便判断一次性滚动多少距离）
        num += 30;
      }, 20);
      // 20：速度（可调节）
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.click-scroll-X {
  // text-align: right;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-right: 20px;
  margin-top: 20px;
  .left_btn {
    font-size: 20px;
    cursor: pointer;
    margin: 0px 15px 0;
  }
  .right_btn {
    font-size: 20px;
    cursor: pointer;
    margin: 0px 15px 0;
  }
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    // padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;
    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
  .scroll_wrapper {
    width: 480px;
    overflow-x: scroll;
    .scroll_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item {
        cursor: pointer;
        width: 60px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        // border: 1px solid #ccc;
        // border-radius: 3px;
        // box-sizing: border-box;
        flex-shrink: 0;
      }
    }
  }
}
.active {
  color: skyblue;
}
/*隐藏滚动条*/
.scroll_wrapper::-webkit-scrollbar {
  display: none;
}
</style>

父组件: ParentTime.vue

<template>
  <div id="app">
    <TimePage
      :timeList="timeArray"
      :pageNo="page"
      @getPageNo="getPageNo"
    ></TimePage>
  </div>
</template>

<script>
import TimePage from "./components/TimePage.vue";
export default {
  name: "App",
  data() {
    return {
      // 初始化页数
      page: 1,
      timeArray: [
        { value: 0, label: "00:00" },
        { value: 1, label: "00:15" },
        { value: 2, label: "00:30" },
        { value: 3, label: "00:45" },
        { value: 4, label: "01:00" },
        { value: 5, label: "01:15" },
        { value: 6, label: "01:30" },
        { value: 7, label: "01:45" },
        { value: 8, label: "02:00" },
        { value: 9, label: "02:15" },
        { value: 10, label: "02:30" },
        { value: 11, label: "02:45" },
        { value: 12, label: "03:00" },
        { value: 13, label: "03:15" },
        { value: 14, label: "03:30" },
        { value: 15, label: "03:45" },
        { value: 16, label: "04:00" },
        { value: 17, label: "04:15" },
        { value: 18, label: "04:30" },
        { value: 19, label: "04:45" },
        { value: 20, label: "05:00" },
        { value: 21, label: "05:15" },
        { value: 22, label: "05:30" },
        { value: 23, label: "05:45" },
        { value: 24, label: "06:00" },
        { value: 25, label: "06:15" },
        { value: 26, label: "06:30" },
        { value: 27, label: "06:45" },
        { value: 28, label: "07:00" },
        { value: 29, label: "07:15" },
        { value: 30, label: "07:30" },
        { value: 31, label: "07:45" },
        { value: 32, label: "08:00" },
        { value: 33, label: "08:15" },
        { value: 34, label: "08:30" },
        { value: 35, label: "08:45" },
        { value: 36, label: "09:00" },
        { value: 37, label: "09:15" },
        { value: 38, label: "09:30" },
        { value: 39, label: "09:45" },
        { value: 40, label: "10:00" },
        { value: 41, label: "10:15" },
        { value: 42, label: "10:30" },
        { value: 43, label: "10:,45" },
        { value: 44, label: "11:00" },
        { value: 45, label: "11:15" },
        { value: 46, label: "11:30" },
        { value: 47, label: "11:45" },
        { value: 48, label: "12:00" },
        { value: 49, label: "12:15" },
        { value: 50, label: "12:30" },
        { value: 51, label: "12:45" },
        { value: 52, label: "13:00" },
        { value: 53, label: "13:15" },
        { value: 54, label: "13:30" },
        { value: 55, label: "13:45" },
        { value: 56, label: "14:00" },
        { value: 57, label: "14:15" },
        { value: 58, label: "14:30" },
        { value: 59, label: "14:45" },
        { value: 60, label: "15:00" },
        { value: 61, label: "15:15" },
        { value: 62, label: "15:30" },
        { value: 63, label: "15:45" },
        { value: 64, label: "16:00" },
        { value: 65, label: "16:15" },
        { value: 66, label: "16:30" },
        { value: 67, label: "16:45" },
        { value: 68, label: "17:00" },
        { value: 69, label: "17:15" },
        { value: 70, label: "17:30" },
        { value: 71, label: "17:45" },
        { value: 72, label: "18:00" },
        { value: 73, label: "18:15" },
        { value: 74, label: "18:30" },
        { value: 75, label: "18:45" },
        { value: 76, label: "19:00" },
        { value: 77, label: "19:15" },
        { value: 78, label: "19:30" },
        { value: 79, label: "19:45" },
        { value: 80, label: "20:00" },
        { value: 81, label: "20:15" },
        { value: 82, label: "20:30" },
        { value: 83, label: "20:45" },
        { value: 84, label: "21:00" },
        { value: 85, label: "21:15" },
        { value: 86, label: "21:30" },
        { value: 87, label: "21:45" },
        { value: 88, label: "22:00" },
        { value: 89, label: "22:15" },
        { value: 90, label: "22:30" },
        { value: 91, label: "22:45" },
        { value: 92, label: "23:00" },
        { value: 93, label: "23:15" },
        { value: 94, label: "23:30" },
        { value: 95, label: "23:45" },
      ],
    };
  },
  computed: {
   // timeLength() {
   //   return this.timeArray.length;
   // },
  },
  methods: {
    getPageNo(item) {
      this.page = item.value;
      console.log(this.page, item, "-----");
    },
  },
  components: {
    TimePage,
  },
};
</script>

<style scoped>

</style>