一、下拉刷新

1.json文件

說明：開啟下拉刷新，然后設置窗口的背景色，方便觀看。

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

?

2. js文件

說明：重新發(fā)起請求，并顯示加載中

   * 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {
    this.getData()
    wx.showLoading({
      title: '加載中',
    })
  },

?

?3.js文件

說明：當數據請求成功后，收回下拉刷新框并關閉加載中。

      success: ({data}) => {
        // 數據加載成功,關閉下拉刷新
        wx.stopPullDownRefresh()
        // 成功后并關閉加載中
        wx.hideLoading()
      this.setData({
        arrList:data.data
      })
      },

二、觸底事件刷新

2.json文件

說明：onReachBottomDistance定義了從頁面底部的距離為50px，當滾動距離接近到這個值時，通常會觸發(fā)一個函數或事件來加載更多內容。

  "onReachBottomDistance": 50

?說明：當距離頁面底部為50px的時候，重新發(fā)起數據請求，并添加一個顯示導航條加載動畫(轉態(tài)遮罩)

   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom() {
   this.getData()
  //  在當前頁面顯示導航條加載動畫,是一個狀態(tài)遮罩
   wx.showNavigationBarLoading()


  },

?說明：改造了getData()函數，將以前的數據和現在獲取的數據進行相加。以此下拉獲取更多的信息。文章來源地址http://www.zghlxwxcb.cn/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
      })
      }
    })
  },
  /**
   * 生命周期函數--監(jiān)聽頁面加載
   */
  onLoad(options) {
    this.getData()
    wx.showLoading({
      title: '加載中',
    })
  },

  /**
   * 生命周期函數--監(jiān)聽頁面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函數--監(jiān)聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命周期函數--監(jiān)聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命周期函數--監(jiān)聽頁面卸載
   */
  onUnload() {

  },

  /**
   * 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {
    this.getData()
    //清空數據，重新獲取數據(歸零)
    this.setData({
      arrList:[]
    })
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom() {
   this.getData()
  //  在當前頁面顯示導航條加載動畫,是一個狀態(tài)遮罩
   wx.showNavigationBarLoading()


  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {

  }
})

到了這里，關于微信小程序下拉刷新獲取數據和觸底事件刷新實現的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！