• ?? 所屬專欄：【微信小程序開發(fā)教程】

• ?? 作??者：我是夜闌的狗??

• ?? 個人簡介：一個正在努力學技術(shù)的CV工程師，專注基礎(chǔ)和實戰(zhàn)分享 ，歡迎咨詢！

• ?? 歡迎大家：這里是CSDN，我總結(jié)知識的地方，喜歡的話請三連，有問題請私信 ?? ?? ??

前言

??大家好，又見面了，我是夜闌的狗??，本文是專欄【微信小程序開發(fā)教程】專欄的第25篇文章;
??今天開始學習微信小程序的第14天??????，開啟新的征程，記錄最美好的時刻??，每天進步一點點。
??專欄地址：【微信小程序開發(fā)教程】， 此專欄是我是夜闌的狗微信小程序開發(fā)過程的總結(jié)，希望能夠加深自己的印象，以及幫助到其他的小伙伴????。
??如果文章有什么需要改進的地方還請大佬不吝賜教????。

一、下拉刷新事件

??前面已經(jīng)學習完了頁面導(dǎo)航，基本了解到聲明式導(dǎo)航和編程式導(dǎo)航，還有導(dǎo)航傳參以及將形參掛載當前頁面中進行使用。接下來就來學習一下小程序中視圖與邏輯中的頁面事件是如何進行響應(yīng)的。話不多說，讓我們原文再續(xù)，書接上回吧。

1、下拉刷新的概念

??下拉刷新是移動端的專有名詞，指的就是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數(shù)據(jù)的行為。在小程序中經(jīng)常使用下拉刷新這個操作來刷新頁面中的數(shù)據(jù)。

2、啟用下拉刷新

??之前有介紹過，在小程序中所有頁面都默認沒有下拉刷新的。啟用下拉刷新有兩種方式：

??注意：在實際開發(fā)中，推薦使用第 2 種方式，為需要的頁面單獨開啟下拉刷新的效果。

??這里以 message 為例，單獨開啟下拉刷新功能，具體代碼如下所示：

• message.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

??可以來看一下運行效果：

3、配置下拉刷新窗口的樣式

??在全局或頁面的 .json 配置文件中，通過 backgroundColor 和 backgroundTextStyle 來配置下拉刷新窗口的樣式，其中兩個屬性的介紹如下：

??這里還是以 message 為例，對下拉刷新樣式進行修改，具體代碼如下所示：

• message.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

??可以來看一下運行效果：

4、監(jiān)聽頁面的下拉刷新事件

??在頁面的 .js 文件中，通過 onPullDownRefresh() 函數(shù)即可監(jiān)聽當前頁面的下拉刷新事件。通過下面栗子來學習一下：

message.wxml

??在頁面的 wxml 中有如下的 UI 結(jié)構(gòu)，點擊按鈕可以讓 count 值自增 +1。

<view>count當前值為：{{count}}</view>
<button bindtap="countAdd">+1</button>

message.js

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    count: 0,
  },
  /**
   * + 1 按鈕的點擊事件處理函數(shù)
   */
  countAdd (){
    this.setData({
      count: this.data.count + 1
    })
  },
})

?? 運行結(jié)果如下所示：

?? 在此基礎(chǔ)上，觸發(fā)頁面的下拉刷新事件的時候，如果要把 count 的值重置為 0，具體代碼如下所示：

message.js

Page({
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {
    this.setData({
      count:0
    })
  },
})

?? 可以來看一下運行效果：

5、停止下拉刷新的效果

?? 前面在使用下拉刷新的時候就發(fā)現(xiàn)在真機上，下拉刷新并不會像模擬器那樣主動關(guān)閉。當處理完下拉刷新后，下拉刷新的 loading 效果會一直顯示，不會主動消失，所以需要手動隱藏下拉刷新的 loading 效果。
?? 此時，調(diào)用 wx.stopPullDownRefresh() 可以停止當前頁面的下拉刷新。具體代碼如下：

message.js

?? 當數(shù)據(jù)重置成功之后，調(diào)用此函數(shù)，自動關(guān)閉下拉刷新的效果。

Page({
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {
    this.setData({
      count:0
    })
    // 當數(shù)據(jù)重置成功之后，調(diào)用此函數(shù)，自動關(guān)閉下拉刷新的效果
    wx.stopPullDownRefresh();
  },
})

?? 因為真機上運行效果也是與上面的一樣，所以就不做展示了。

總結(jié)

??感謝觀看，這里就是頁面事件 - 下拉刷新的介紹使用，如果覺得有幫助，請給文章點個贊吧，讓更多的人看到。?? ?? ??

??也歡迎你，關(guān)注我。?? ?? ??

??原創(chuàng)不易，還希望各位大佬支持一下，你們的點贊、收藏和留言對我真的很重要！??！?? ?? ?? 最后，本文仍有許多不足之處，歡迎各位認真讀完文章的小伙伴們隨時私信交流、批評指正！下期再見。??

更多專欄訂閱:

• ?? 【LeetCode題解（持續(xù)更新中）】
• ?? 【Java Web項目構(gòu)建過程】
• ?? 【微信小程序開發(fā)教程】
• ? 【JavaScript隨手筆記】
• ?? 【大數(shù)據(jù)學習筆記（華為云）】
• ?? 【程序錯誤解決方法（建議收藏）】
• ?? 【軟件安裝教程】

訂閱更多，你們將會看到更多的優(yōu)質(zhì)內(nèi)容！！文章來源地址http://www.zghlxwxcb.cn/news/detail-783998.html

到了這里，關(guān)于【微信小程序】-- 頁面事件 - 下拉刷新（二十五）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！