手写 分页

子组件：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

父组件: 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139