在Vue项目中，实现新闻列表页面的数据的上拉加载更多和下拉刷新数据的功能中，发现列表数据接口的两次请求的问题，具体查看文档；

Vue上拉组件进入页面就触发刷新的问题

1. 发现问题

在Vue项目中练习时，为了在新闻列表页面实现数据的上拉加载更多和下拉刷新数据的功能，使用了第三方组件库VuxUI中的 Scroller组件，将Scroller组件在Vue项目中使用时，实现了该功能，同时测试发现了一个问题，在控制台查看到每一次进入列表页面时，对于列表数据的请求发起了2次，当新闻列表数据的总数据量小于每一次数据请求的数据量时，第一次请求就请求了所有的数据，那么第二次数据请求就会失败，页面就会报错；同时由于一次进行两次数据请求不符合逻辑，因而对该问题进行分析思考；

2. 问题分析

由于该功能是使用VuxUI组件库中的Scroller组件实现了，因而分析该组件提供的属性、事件方法和触发刷新操作的方式，其中Scroller组件中触发上拉加载函数是检测页面是否滑动到底部，其中通过@on-scroll-bottom="onScrollBottom"事件进行检测是否滑动到页面的底部，在onScrollBottom()函数中进行判断是否滑到底部，依据是data中定义的onFetching值，当达到页面底部时，会使该值由false变为true，执行onScrollBottom()函数中的相关函数，如下所示：

// 滚动到底部触发加载更多数据
onScrollBottom () {
  if (this.onFetching) {
    // do nothing
  } else {
    this.onFetching = true;
    if (this.isBottomShow == true) {
      return;
    }
    setTimeout(() => {
      // 加载更多数据，自定义的函数
      ...
      this.$nextTick(() => {
        this.$refs.scrollerBottom.reset();
      });
      this.onFetching = false;
    }, 1000);
  }
},

在Vue项目中，每一次进入新闻列表页面时，由于在进行列表数据初始化时没有数据，也就是在第一次列表数据发起请求的时间段内，页面的内容为空，会自动触发页面滑动到底部的函数，使得data中定义的onFetching变量的值变为true，因而触发加载更多的数据的操作，使得在第一次请求没有完成时又开始进行第二次列表数据请求，造成后面出现的错误；

3. 解决问题的方法

解决该问题的方法就是在执行加载更多数据操作前增加一个逻辑判断，该逻辑判断就是当第一次成功的请求了数据后才能执行第二次的数据请求，在data中设置一个新变量listDataFirstSuccess，同时在列表数据成功请求的处理函数中修改该变量的值，还需要在onScrollBottom ()函数中增加逻辑判断，满足第一次加载数据成功和页面滑动到底部两个要求才进行请求更多的数据，如下代码所示：

// 请求获取列表数据，成功获取第一条数据后才能通过下拉加载下一页列表数据
getListData(this.params)
  .then(res => {
    this.listDataFirstSuccess = true;
    ...
  })
  .catch(err => {
    ...
  })

// 滚动到底部触发加载更多数据
onScrollBottom () {
  // 解决初始进入请求两次数据的问题，判断是否成功请求了第一次并且没有滑动到底部
  if (this.onFetching || !this.listDataFirstSuccess) {
    // do nothing
  } else {
    this.onFetching = true;
    if (this.isBottomShow == true) {
      return;
    }
    setTimeout(() => {
      // 加载更多数据，自定义的函数
      ...
      this.$nextTick(() => {
        this.$refs.scrollerBottom.reset();
      });
      this.onFetching = false;
    }, 1000);
  }
},