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

这篇具有很好参考价值的文章主要介绍了微信小程序下拉刷新获取数据和触底事件刷新实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、下拉刷新

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()函数，将以前的数据和现在获取的数据进行相加。以此下拉获取更多的信息。文章来源地址https://www.toymoban.com/news/detail-567859.html

  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() {

  }
})

到了这里，关于微信小程序下拉刷新获取数据和触底事件刷新实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！