持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

页面刷新

• 在我们使用微信小程序以及手机应用的时候，经常会使用到下拉刷新，获取新的数据。同样的，在微信小程序开发过程中，我们也可以设置下拉刷新页面，在微信开发者文档中，有# wx.stopPullDownRefresh(Object object)这样的api，可以完成我们的页面刷新，文档链接：developers.weixin.qq.com/miniprogram…

• 在index.js文件中，我们微信小程序开发的js文件基础页面就自带了onReachBottom和onPullDownRefresh等api组件，方便了我们进行下拉刷新和加载更多，具体的使用代码如下：

  onPullDownRefresh: function () {
    this.getReleaseData()
   setTimeout(()=>{
     wx.stopPullDownRefresh({
       success: (res) => {
         wx.showToast({
           title: '刷新成功',
         })
       },
     })
   },500)
  },

这里下拉设置了重新获取数据，并且设置了下拉刷新时间为0.5秒。当刷新成功之后会弹出消息框，提示用户刷新成功wx.showToast.

• 同样，我们也有一个api是上拉触底事件的处理函数onReachBottom，在index.js文件中的代码如下：

onReachBottom: function () {
    this.getReleaseData(this.data.releaseData.length);
  },

下拉加载更多

• 加载更多需要用到新旧数组拼接，使原有的商品和新加载的商品拼接到一起，在获取数据的函数里面let 老数据和新数据拼接到一起，然后同时展示到我们的主页面当中。

  getReleaseData(size=0){
    wx.cloud.callFunction({
      name:"get_user_data",
      data:{
        size
      }
      this.setData({
        releaseData:newData
      }) 

• 结合之前我们刷新onpulldownrefresh函数里面设置了刷新时重新加载商品数据，就可以实现刷新后新商品数据和旧商品数据拼接到一起了。数组拼接之前的文章里面有，这里就不介绍了。

至此，我们的页面刷新下拉加载更多就完成了。