现在订阅送半年,再次订阅 / 续订送一年。(活动即将结束)

微信小程序:分页显示内容,实现无限页面加载功能

微信小程序上显示的内容列表,需要分页显示,向下滚动页面,页面到底了以后如果列表里面还有要显示的项目,就把下一页上的内容项目加载进来放到当前的页面上显示出来。这个就是无限页面加载功能。

思路

小程序的页面滚动到底部的时候,会触发一个 onReachBottom 方法,在这个方法里我们可以去实现加载下一页内容项目的功能。页面加载(onLoad)以后,向服务端请求得到第一页要显示的内容项目,通常在得到的响应里面,服务端会包含一些额外的信息,比如请求的列表一共有多少个项目,当前给我们的是哪些,当前的页码是什么,列表分成了多少页等等。利用这些信息,结合 onReachBottom 就可以实现无限加载功能了。

可以在小程序页面的数据(data)里面记录一下分页的状态,比如当前页(currentPage),一共有多少页(totalPages)。每次滚动到页面底部的时候,就重新设置一下 currentPage 的值,让它加上 1 ,然后去载入下一页的内容,得到数据以后放在当前页面的列表数据里面,重新设置页面的数据会触发页面重新渲染。

实践

下面我们用 WordPress 的文章列表接口做个演示。

数据

页面上的数据大概像这样:

  data: {
    entities: [],
    totalPages: 0,
    currentPage: 1,
    isLoading: true,
  },

entities 是要表示的内容列表项目,totalPages 表示一共有多少页,currentPage 表示当前加入的页码是哪个。isLoading 表示加载的状态。

初始数据

在页面的 onLoad 这个生命周期方法里,可以使用 wx.request 去请求页面的初始数据,得到了数据以后,就把数据放到页面上用。

  onLoad () {
    wx.request({
      url: `${ API_BASE }/${ API_ROUTE }`,
      success: (response) => {
        const entities = response.data
        this.setData({
          entities,
          isLoading: false,
          totalPages: response.header['x-wp-totalpages'],
          currentPage: 1,
        })
      }
    })
  },

WordPress 的列表接口上,表示一共有多少页的信息是在一个 header 里面,response.header['x-wp-totalpages']。其它的后端服务接口应该有类似的信息。

无限加载

页面滚动到底儿会触发执行 onReachBottom,在页面上添加一个这样的方法,执行它的时候让它去请求列表里面的下一页内容,再把得到的内容合并到页面数据里面的列表数据里。

  onReachBottom () {
    let { currentPage, totalPages, isLoading } = this.data

    if (currentPage >= totalPages || isLoading) {
      return
    }

    this.setData({
      isLoading: true
    })

    currentPage = currentPage + 1

    wx.request({
      url: `${ API_BASE }/${ API_ROUTE }?page=${ currentPage }`,
      success: (response) => {
        console.log(response)
        const entities = [...this.data.entities, ...response.data]
        this.setData({
          entities,
          currentPage,
          isLoading: false,
          totalPages: response.header['x-wp-totalpages'],
        })
      }
    })
  }
})

再分解一下。在方法里,先把 currentPagetotalPagesisLoading 这些数据从页面数据里拿出来用一下:

let { currentPage, totalPages, isLoading } = this.data

然后我们检查一下,看看当前页面是不是大于等于总共的页面,或者如果当前页面是加载状态,我们直接 return,就是什么都不做:

    if (currentPage >= totalPages || isLoading) {
      return
    }

接着设置了页面的加载状态,然后让当前页码加上 1 :

    this.setData({
      isLoading: true
    })

    currentPage = currentPage + 1

接着再用 wx.request 去请求下一页上的内容项目:

    wx.request({
      url: `${ API_BASE }/${ API_ROUTE }?page=${ currentPage }`,
      success: (response) => {
        console.log(response)
        const entities = [...this.data.entities, ...response.data]
        this.setData({
          entities,
          currentPage,
          isLoading: false,
          totalPages: response.header['x-wp-totalpages'],
        })
      }
    })

在请求的接口地址里面,添加了一个 page 参数,它可以设置具体要得到哪一页上的数据,它的值我们用 currentPage 来表示。成功得到了数据以后,我们把新的列表数据跟当前在页面上显示的列表数据合并到一块儿了。这里用了 JavaScript 的 Spread 操作符(...)。用 setData 方法重新设置页面上的数据,会让页面视图重新显示。



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅万达招商,万达招商QQ公众号。



240746680

用 QQ 扫描二维码,
加入万达招商,万达招商QQ QQ 群。

统计

8306
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注万达招商,万达招商QQ,每天进步一点

友情链接:guoqibee.com  万达注册  万达主管  华宇招商  万达开户  万达娱乐直属  万达直属  万达娱乐招商  万达娱乐主管QQ  万达招商QQ