微信小程序下拉刷新获取数据和触底事件刷新实现

一、下拉刷新

1.json文件

说明：开启下拉刷新，然后设置窗口的背景色，方便观看。

  "enablePullDownRefresh": true,
  "backgroundColor":"#FFC0CB"

2. js文件

说明：重新发起请求，并显示加载中

   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.getData()
    wx.showLoading({
      title: '加载中',
    })
  },

3.js文件

说明：当数据请求成功后，收回下拉刷新框并关闭加载中。

      success: ({data}) => {
        // 数据加载成功,关闭下拉刷新
        wx.stopPullDownRefresh()
        // 成功后并关闭加载中
        wx.hideLoading()
      this.setData({
        arrList:data.data
      })
      },

二、触底事件刷新

2.json文件

说明：onReachBottomDistance定义了从页面底部的距离为50px，当滚动距离接近到这个值时，通常会触发一个函数或事件来加载更多内容。

  "onReachBottomDistance": 50

说明：当距离页面底部为50px的时候，重新发起数据请求，并添加一个显示导航条加载动画(转态遮罩)

   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
   this.getData()
  //  在当前页面显示导航条加载动画,是一个状态遮罩
   wx.showNavigationBarLoading()


  },

说明：改造了getData()函数，将以前的数据和现在获取的数据进行相加。以此下拉获取更多的信息。

  getData() {
    wx.request({
      url: '**',
      method:"GET",
      success: ({data:res}) => {
        // 数据加载成功,关闭下拉刷新
        wx.stopPullDownRefresh()
        // 成功后并关闭加载中
        wx.hideLoading()
        wx.hideNavigationBarLoading()
        let oldData=this.data.arrList
        let newData=oldData.concat(res.data)
      this.setData({
        arrList:newData
      })
      }
    })
  },

三、源码

3.1 xml文件

<!-- 简单的前台页面 -->
<view>
<block wx:for="{{arrList}}" wx:key="id">
<view>猫儿</view>
<image src="{{item.url}}" mode=""/>
</block>
</view>

3.2 js文件

// pages/refresh/refresh.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arrList:[]
  },
  getData() {
    wx.request({
      url: '**',
      method:"GET",
      success: ({data:res}) => {
        // 数据加载成功,关闭下拉刷新
        wx.stopPullDownRefresh()
        // 成功后并关闭加载中
        wx.hideLoading()
       //关闭导航加载
        wx.hideNavigationBarLoading()
        let oldData=this.data.arrList
        let newData=oldData.concat(res.data)
      this.setData({
        arrList:newData
      })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getData()
    wx.showLoading({
      title: '加载中',
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.getData()
    //清空数据，重新获取数据(归零)
    this.setData({
      arrList:[]
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
   this.getData()
  //  在当前页面显示导航条加载动画,是一个状态遮罩
   wx.showNavigationBarLoading()


  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})