零基础微信小程序开发——页面事件之下拉刷新事件（保姆级教程+超详细）

🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容

🌸个人主页： 长风清留杨的博客

🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。

✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战

🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂

页面事件

下拉刷新事件

什么是下拉刷新？

下拉刷新是移动设备上的一种专有名词和操作方式。它指的是用户通过手指在屏幕上的下拉滑动操作，从而触发页面数据的重新加载。

在小程序开发中的应用：

在小程序开发中，下拉刷新是一个常见的页面事件。它允许用户在不离开当前页面的情况下，通过简单的下拉动作来更新页面内容。

当用户在小程序页面中执行下拉操作时，系统会检测到这一行为并触发下拉刷新事件。此时，小程序开发者可以编写相应的代码来处理这个事件。例如，从服务器获取最新的数据并更新到页面上。这样，用户就可以在不离开当前页面的情况下，获取到最新的信息。

下拉刷新的优势：

下拉刷新功能不仅提高了用户体验，还使得数据更新变得更加便捷和高效。它允许用户在不中断当前操作的情况下，轻松地获取最新的数据和信息。

在小程序开发中，合理利用下拉刷新事件可以显著提升应用的交互性和实用性。它为用户提供了一个简单而直观的方式来更新页面内容，从而增强了应用的可用性和吸引力。

启用下拉刷新

全局开启下拉刷新

全局开启下拉刷新意味着在整个小程序的所有页面中，下拉刷新功能都将被启用。要实现这一点，你需要在app.json文件的window节点中，将enablePullDownRefresh属性设置为true。

// app.json
{
  "window": {
    "enablePullDownRefresh": true
    // ... 其他配置
  }
}

虽然全局开启下拉刷新方便快捷，但它可能并不总是符合实际需求。因为在实际应用中，可能只有部分页面需要下拉刷新功能。

局部开启下拉刷新

为了解决全局开启下拉刷新带来的问题，小程序提供了局部开启下拉刷新的方式。这种方式允许你为特定的页面单独开启下拉刷新功能。

要实现局部开启下拉刷新，你需要在目标页面的.json配置文件中，将enablePullDownRefresh属性设置为true。

// pages/index/index.json
{
  "enablePullDownRefresh": true
}

通过这种方式，你可以精确控制哪些页面需要下拉刷新功能，从而提高用户体验和应用性能。

案例

我们做一个案例演示，演示一下局部开启下拉刷新，我将在index.wxml页面开启下拉刷新，然后通过index.wxml页面点击按钮跳转到message.wxml页面，但是message.wxml页面没有开启下拉刷新

index.json文件：

给index.json文件配置可下拉刷新配置，那么index.wxml页面就可以下拉，不影响其他页面

{
    "navigationBarBackgroundColor": "#ff0000", 
    "navigationBarTitleText": "公众号：小白的大数据之旅",   
    "enablePullDownRefresh": true   
}

• "enablePullDownRefresh": true 表示开启下拉刷新

message.json文件：

给message.json文件配置取消下拉刷新配置，那么message.wxml页面就不可以下拉刷新，不影响其他页面

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "消息页面",
  "backgroundColor": "#ff0000",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": false 
}

• "enablePullDownRefresh": false 表示取消下拉刷新

配置下拉更新窗口样式

在小程序开发中，下拉刷新事件是一个常见的用户交互功能，它允许用户通过下拉屏幕来刷新当前页面的内容。为了提升用户体验，开发者可以自定义下拉刷新窗口的样式，使其更加符合应用的风格和主题。

配置下拉刷新窗口的样式

要配置下拉刷新窗口的样式，你需要在全局或页面的.json配置文件中进行如下设置：

{
  "window": {
    // 其他配置项...
    "backgroundTextStyle": "dark", // 或 "light"
    "backgroundColor": "#ffffff" // 16进制的颜色值
  }
}

• backgroundTextStyle：用来配置下拉刷新loading的样式。它有两个选项：dark（暗色）和light（亮色）。这个属性决定了加载过程中的文字颜色和图标样式。
• backgroundColor：用来配置下拉刷新窗口的背景颜色。它仅支持16进制的颜色值，你可以根据需要选择适合的颜色。

暗色加载样式和白色背景

{
  "window": {
    "backgroundTextStyle": "dark",
    "backgroundColor": "#ffffff"
  }
}

这个配置将下拉刷新窗口的背景颜色设置为白色，加载过程中的样式为暗色。适合用于浅色主题的应用。

亮色加载样式和黑色背景

{
  "window": {
    "backgroundTextStyle": "light",
    "backgroundColor": "#000000"
  }
}

这个配置将下拉刷新窗口的背景颜色设置为黑色，加载过程中的样式为亮色。适合用于深色主题的应用。

蓝色背景和中性色加载样式

{
  "window": {
    "backgroundTextStyle": "dark", 
    "backgroundColor": "#0000FF" 
  }
}

注意事项

1. 确保你使用的颜色值是有效的16进制颜色代码。
2. backgroundTextStyle的值只能是dark或light，不能是其他值。
3. 配置更改后，需要重新编译和预览小程序以查看效果。

监听页面的下拉刷新事件

在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。

// 示例代码
Page({
  // 其他页面生命周期函数和事件处理函数...

  // 监听页面的下拉刷新事件
  onPullDownRefresh: function() {
    // 在这里编写下拉刷新时要执行的逻辑
    // 例如：重新请求数据、更新页面内容等
    console.log('页面下拉刷新了！');

    // 注意：小程序框架会在下拉刷新动作结束后自动停止下拉刷新动画
    // 如果你需要在某个时机主动停止下拉刷新动画，可以调用wx.stopPullDownRefresh()
  }
});

案例：

现在我们尝试做一个案例，做一个点击事件，在页面上设置一个按钮和文本，文本中展示变量count的值，当点击按钮count的值就会自增+1，下拉刷新之后count的值就会清零

index.wxml文件：

设置一个按钮，给按钮绑定一个事件，点击按钮即可触发事件，并且展示一段本分，用来显示num变量的值

<button bindtap="student_num">
    学生数+1
</button>
<view>
    <text>当前学生人数：{{ num }}</text>
</view>

index.json文件：

开启下拉刷新配置,主要是设置 "enablePullDownRefresh": true

{
    "navigationBarBackgroundColor": "#ff0000", 
    "navigationBarTitleText": "公众号：小白的大数据之旅",   
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark",
    "backgroundColor": "#0000FF" 
}

index.js文件：

首先定义一个变量num，默认值为0，然后捕捉student_num事件，当事件触发之后，让当前变量num的值自增+1，然后使用onPullDownRefresh方法捕捉到页面进行了下拉刷新，然后将变量num的值变为0

// 使用Page函数定义一个页面
Page({
    // 页面的初始数据对象
    data:{
        // 定义一个名为num的变量，初始值为0，通常用于页面渲染时的数据展示
        num:0
    },

    // 定义一个名为student_num的方法，用于增加num的值
    student_num(){
        // 使用setData方法更新页面数据
        // 此处将num的值增加1
        this.setData({
            num:this.data.num+1 // 更新num的值为当前值加1
        })
    },

    // 定义一个名为onPullDownRefresh的方法，用于处理下拉刷新事件
    onPullDownRefresh:function(){
        // 当用户下拉刷新页面时，此方法会被触发
        // 此处将num的值重置为0
        this.setData({
            num:0 // 重置num的值为0
        })

        // 注意：在实际应用中，下拉刷新后通常需要重新请求数据来更新页面
        // 此处仅作为示例，仅重置了num的值

        // 另外，下拉刷新动画结束后，通常需要手动停止刷新状态
        // 可以使用wx.stopPullDownRefresh()方法来停止下拉刷新动画
    }
})