解决报错：Vue移动端项目中鼠标无动作时，滚动条自动下滑，拉取数据

背景：

在鼠标慢慢滚动，滚动到某一处位置的时候，滚动条自动触发，拼命往下走。正常应该是滑动到摸个位置时候，加载下一页的数据。

这个问题困扰了我两天，特此记录。

用的Vant组件库的van-list来实现自动加载下一页数据。

解决思路：

1.因为出现现象是鼠标不动，但是滚动条会自动。所以我先考虑，是不是跟滚动条的事件有关。翻遍了代码，我也没有写鼠标滚动条事件啊，scrollTop都没有写。在这个思路我困在里面2个多小时，查阅网上资料无果，心态崩溃了1个多小时。

2.后面我就在想，是不是vant组件库的问题，里面的底部加载事件方法有问题。看了下，只是滑动到底的时候，去请求接口。也没啥了。（ps:想去看组件库源码，但是不知道源码在哪里看...好像是在node_modules里...)

3.来都来了，那会不会是接口的问题啊？想了想应该不会，但是我还是检查了一下（老爷保佑，找到了问题了）

请求回来的数据列表，第一页和下一页没有合并！！赶紧改正！！

 总结：

从这个问题中，也暴露了es6扩展运算符的弱点。附上学习链接：

https://blog.csdn.net/astonishqft/article/details/82899965

找问题报错，果然还是得自己多思考啊，心态也很重要。每次想要放弃的时候，还好我告诉自己，再看20分钟，就不钻牛角尖了 。因为这样想，这次才能找到这个没有标红的报错。

相关代码：

        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >

async getArticleListFn () {
      // 获取文章列表
      const res = await getAllArticleList({
        channel_id: this.channelId, // 先默认请求 推荐频道 数据
        timestamp: this.theTime
      })
      console.log(res)
      this.list = [...this.list, ...res.data.data.results]
      this.theTime = res.data.data.pre_timestamp
      /* 底部加载 */
      this.loading = false
      if (res.data.data.pre_timestamp === null) {
        // 本次回来的数据是最后，没有下一段数据了
        this.finished = true
      }
      /* 顶部加载 */
      // 顶部加载状态改为false
      this.isLoading = false
    },
 
    // 底部加载事件方法
    async onLoad () {
      if (this.list.length === 0) {
        this.loading = false// 第一次上面还是判定触底（触发onLoad方法时loading自动改true）
        // 如果不改回来，下次触底就不再执行onLoad方法
        // 如果页面没有数据，没有高度，让本次onLoad逻辑代码不往下执行
      }
      this.getArticleListFn()
    },