第五章：如何开发一款内容展示类小程序（下）

作者：知晓云 - 小程序开发快人一步

前面我们搭建了一个简单的页面框架，实现了文章列表展示和跳转文章详情的功能。然而，仅有这些功能是明显不够的，因此，接下来，我将向你讲解，如何加上更多稍显复杂，但很有必要的功能，包括加载更多文章列表，显示未读与已读状态和文章分享。

加载更多文章列表

前面，我们在首页模拟了获取第一页文章的请求。考虑到性能问题，大部分情况下我们不会在首页展示出所有的文章列表，在 PC 上我们可以通过分页来实现，而在移动端，比较常见的做法是在列表末尾通过上拉或者一个加载更多按钮，来获取更多文章。这里，我们将采用第二种做法。

加载更多的逻辑是这样的：当一次请求获取到的文章数量大于或等于我们规定的每页数量时，按钮的文案会显示为 ”加载更多“，并且点击后会去获取下一页的文章，而如果获取到的文章数量小于我们规定的每页数量时，按钮的文案会显示为 ”已无更多“。

这里需要解释一下，如果获取到最后一页的文章数恰好为我们规定的每页数量时，当点击加载更多，会继续获取下一页文章，此时获取到的文章数量为 0 ，小于规定的每页数量，按钮的文案变为 ”已无更多“。

为了简化步骤，我们模拟的下一页的文章数量小于 4 篇，这样，当我们点击一次加载更多后，按钮文章会变为 ”已无更多“。

这里我们需要增加两个变量，一个是 isEnd，用于标识已无更多，另一个是 isLoading，用于防止用户连续多次点击加载更多按钮。

通过小程序中的按钮组件的 loading 属性，可以方便地显示正在加载中的样式。

// pages/index/index.wxml
<button type="default" plain="{
   {true}}" loading="{
   {loading}}" bindtap="loadMore">
  {
   {
   loadMoreText}}
</button>

制造静态数据，数量为 2 条，表示已无更多。

// pages/index/index.js
const lastPage = [{
   
  id: '5',
  title: '超新约全书',
  description: '一个以折磨人为乐趣的上帝',
  cover: 'https://xxx.xxx.xxx.jpg'
}, {
   
  id: '6',
  title: '2001太空漫游 2001',
  description: '现代科幻电影技术的里程碑',
  cover: 'https://xxx.xxx.xxx.jpg'
}]
 
// pages/index/index.js
let isEnd = false
Page({
   
  data: {
   
    articles: [],
    loading: false,
    loadMoreText: '加载更多'
  },
 
  onLoad: function() {
   
    this.getArticles(true)
  },
 
  loadMore: function(event) {
   
    this.getArticles()
  }
})

重新实现 getArticles 方法：

getArticles: function(i