uniapp项目的上拉加载更多(day7)

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

上一篇文章中我们完成了上拉刷新，完成的样式如下图所示：

接下来我们将完成下拉加载更多，比起下拉刷新而言，上拉加载更多涉及到的知识点更多而且更加复杂，比如说数组的并且，es6的解构赋值等等

• 要使用上拉加载更多我们首先需要监听到页面触底时候的变化，这里有一个api是负责页面触底的，就是onReachBottom ,我们可以先测试一下，当上拉页面触底的时候我们打印一个页面已经触底，看看效果如下图所示：

这样我们的触底方法就执行了，我们需要设置的是当页面触底的时候让page页面数加一，然后再执行以下getNewsData这个方法，然后设置一个样式，当数据还未加载完的时候显示正在加载中，当数据全部加载完了的时候显示我是有底线的哦，这个loading状态为1的时候就显示我是有底线的哦，loading为0的时候显示数据正在加载中，onReachBottom的方法的具体代码如下所示：

onReachBottom() {
    this.loading = 1;
    this.page++;
    this.getNewsData();
  },

这里还有一点注意的是我们平常在使用这种阅读类app的时候比如说今日头条，上拉加载更多的时候通常是新文章和旧文章拼接在一起，而我们现在这样会把旧文章被新文章覆盖掉，不会拼接，所以我们需要对getNewsData进行修改。