vue实现table自动滚动_vue实现tab标签(标签超出自动滚动)

客户需求：右下角表格实现自动滚动

本案例中没有使用任何第三方插件，全部使用vue中相关的js、css以及定时器方式实现。

解决问题的第一步不是找代码，而是分析问题。列表自动滚动常见方式有两种（上下左右的滚动不赘述，只是方向的问题，本案例以向上自动滚动为例）：（1）匀速滚动 （2）有间隔的平滑滚动。本案例先给出匀速滚动的方案。

要匀速向上滚动，以我的经验，最容易想到的是用定时器实现，每隔一个时间差，列表向上移动一个像素（大于一个像素，可能会在视觉上给人卡顿掉帧的感觉），在时间够短的前提下，就会给人一种匀速向上的感觉。然后需要考虑列表衔接的问题，列表再长也有尽头，需要考虑滚动到最后一条数据出现时的问题。

我给出的方案是，在列表的末尾拼接一个同样内容的列表，形成长度为原列表两倍的列表（如果考虑性能问题，在原列表后拼接上原列表的前几条数据就可以，具体几条根据滚动可视范围内的最大完整数据条数而定，具体往下看就明白了），然后当拼接列表滚动到可视范围内的内容和初始状态一致时（即拼接列表的上半段的最后一条记录向上滚动至完全消失时），将拼接列表向上滚动的距离归零，即可在视觉上给人一种匀速向上，且无限循环的感觉。

先上定时器这块方法的代码。

//根据列表长度是否超过可视范围内能够显示的最大完整数据条数，来控制列表是否需要滚动
tableActionFun() {
      this.tableListSize = this.tableList.length;
      //下面的visibleSize是可视范围内能够显示的最大完整数据条数
      if (this.tableListSize > this.visibleSize) {
        this.tableList = this.tableList.concat(this.tableList);
        this.tableTimerFun();  //列表滚动方法
      }
},
 
//列表滚动方法
tableTimerFun() {
      var count = 0;
      this.tableTimer = setInterval(() => {
        if (count < (this.tableList.length / 2) * this.lineHeight) {
          this.tableTop -= 1;
          count++;
        } else {
          count = 0;
          this.tableTop = 0;
        }
      }, this.tableTimerInterval);
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

上面的代码段中提到了可视范围内能够显示的最大完整数据条数 visibleSize，直接上案例里的截图，一看就明白了。截图中可以看到第一条数据和最后一条数据并没有完全显示，因为他们超出父容器的部分被 overflow: hidden 了，所以案例中的 visibleSize = 6.

所以本案例是通过列表不断上移，父容器隐藏超出部分来实现列表自动迅速滚动的。讲解的过程中可能有遗漏，直接上完整代码，重要部分都写了注释。下面的代码直接粘贴运行不会运行成功，因为下面的完整代码涉及接口调用，但所有功能已经一步到位，希望在看的你能通过注释更多地去理解，而不是简单地复制粘贴。希望能对你有所帮助。

<template>
    <div class="productProcess">
        <!-- 如果页面刷新数据比较频繁，可以将loading、showFlag的相关代码删除，防止过于频繁的出现加载动画 -->
        <div class="loading_div" v-show="!showFlag">
            <div>Loading...</div>  <!-- 这个loading自己写，代码没贴出来 -->
        </div>
        <div class="success_info_body" v-show="showFlag">
            <!-- 参数名称、列数根据实际情况调整 -->
            <div class="table_body">
                <div class="table_th">
                    <div class="tr1 th_style">排产编号</div>
                    <div class="tr2 th_style">类型</div>
                    <div class="tr3 th_style">日期</div>
                    <div class="tr4 th_style">进度</div>
                </div>
                <div class="table_main_body">
                    <div class="table_inner_body" :style="{top: tableTop + 'px'}">
                        <div class="table_tr" v-for="(item,index) in tableList" :key="index">
                            <div class="tr1 tr">{{item.planNo}}</div>
                            <div class="tr2 tr">{{item.type}}</div>
                            <div class="tr3 tr" v-if="item.startDate!='-'">{{item.startDate}} ~ {{item.endDate}}</div>
                            <div class="tr3 tr" v-else>-</div>
                            <div class="tr4 tr" v-if="item.process!='-'">{{Number(item.process).toFixed(2)}} %</div>
                            <div class="tr4 tr" v-else>-</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
 <script>
    export default {
        data() {
            return {
                showFlag: true,
                tableTimer: null,
                tableTop: 0,
                tableList: [
                    {
                        "process": 0.0000,
                        "planNo": "BP2022060701",
                        "endDate": "2022-06-07",
                        "type": "砌块",
                        "startDate": "2022-06-07"
                    },
                    {
                        "process": 0.0000,
                        "planNo": "BP2022060701",
                        "endDate": "2022-06-07",
                        "type": "砌块",
                        "startDate": "2022-06-07"
                    },
                    {
                        "process": 0.0000,
                        "planNo": "BP2022060701",
                        "endDate": "2022-06-07",
                        "type": "砌块",
                        "startDate": "2022-06-07"
                    },
                    {
                        "process": 0.0000,
                        "planNo": "BP2022060701",
                        "endDate": "2022-06-07",
                        "type": "砌块",
                        "startDate": "2022-06-07"
                    },
                    {
                        "process": 0.0000,
                        "planNo": "BP2022060701",
                        "endDate": "2022-06-07",
                        "type": "砌块",
                        "startDate": "2022-06-07"
                    },
                    {
                        "process": 0.0000,
                        "planNo": "WP2022061301",
                        "endDate": "2022-06-13",
                        "type": "墙板",
                        "startDate": "2022-06-13"
                    }
                ],
                
                tableListSize: 0,
                componentTimer: null,

                //需要根据情况设置的参数
                title: "排产进度",
                visibleSize: 2, //容器内可视最大完整行数
                lineHeight: 49, //每行的实际高度（包含margin-top/bottom,border等）
                componentTimerInterval: 3600000, //刷新数据的时间间隔
                tableTimerInterval: 200 //向上滚动 1px 所需要的时间，越小越快，推荐值 100
            };
        },
        mounted() {
            clearInterval(this.componentTimer);
            this.bsGetProductProcess();
            this.componentTimerFun();
        },
        methods: {
            //调用数据接口，获取列表数据，根据自己情况填接口url
            bsGetProductProcess() {
                clearInterval(this.tableTimer);
                this.tableTop = 0;
                this.showFlag = true;
                this.tableActionFun();
            },

            tableActionFun() {
                this.tableListSize = this.tableList.length;
                if (this.tableListSize > this.visibleSize) {
                    this.tableList = this.tableList.concat(this.tableList);
                    this.tableTimerFun();
                } else {
                    //this.fillTableList();
                }
            },
            //当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
            fillTableList() {
                var addLength = this.visibleSize - this.tableListSize;
                for (var i = 0; i < addLength; i++) {
                    this.tableList.push({
                        planNo: "-",
                        type: "-",
                        startDate: "-",
                        endDate: "-",
                        process: "-"
                    });
                }
            },
            tableTimerFun() {
                var count = 0;
                this.tableTimer = setInterval(() => {
                    if (count < (this.tableList.length / 2) * this.lineHeight) {
                        this.tableTop -= 1;
                        count++;
                    } else {
                        count = 0;
                        this.tableTop = 0;
                    }
                }, this.tableTimerInterval);
            },
            componentTimerFun() { //页面自动刷新时间
                this.componentTimer = setInterval(() => {
                    this.bsGetProductProcess();
                }, this.componentTimerInterval);
            }
        },
        beforeDestroy() {
            clearInterval(this.componentTimer);
            clearInterval(this.tableTimer);
        },
    }
</script>

<style scoped>
.productProcess {
  width: 550px;
  height: 415px;
}
.loading_div {
  color: #eee;
  padding-top: 100px;
}
.title_div {
  width: 100%;
}
.table_body {
  width: 100%;
  margin-top: 15px;
}
.table_th {
  width: 100%;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.tr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 5px;
  text-align: center;
  font-size: 14px;
}
.tr1 {
  width: 28%;
}
.tr2 {
  width: 15%;
}
.tr3 {
  width: 35%;
  font-size: 13px;
}
 
.tr4 {
  flex: 1;
}
 
.th_style {
  color: rgb(0, 221, 253);
  font-weight: bold;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 5px;
  text-align: center;
}
.table_main_body {
  width: 100%;
  height: 294px;
  overflow: hidden;
  position: relative;
}
.table_inner_body {
  width: 100%;
  position: absolute;
  left: 0;
}
.table_tr {
  display: flex;
  height: 40px;
  line-height: 40px;
  color: #eee;
  font-size: 15px;
  background: rgba(3, 145, 167, 0.1);
  border: 1px solid rgb(4, 114, 131);
  margin-top: 7px;
}
</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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235

最后是效果视频。

原文链接：https://blog.csdn.net/zxczero/article/details/125613915