微信小程序页面事件,下拉刷新事件和上拉触底事件

简介: 这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。

1. 下拉刷新事件

下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

1.1. 开启下拉刷新

开启下拉刷新有两种方式:全局和局部。一般的话是开启局部下刷新,哪里用到哪里开。

  1. 全局开启下拉刷新
    ● 在 app.json 的 window 节点中,将 enablePullDownRefresh 设置为 true
  2. 局部开启下拉刷新
    ● 在页面的 .json 配置文件中,将 enablePullDownRefresh 设置为 true

1.2. 配置下拉刷新的窗口样式

同样配置下拉刷新的窗口样式,也有两种方式。
在app.json中配置window里面的属性,或者在当前页面的.json文件中进行配置。
backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值 backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light.

{
   
    "usingComponents": {
   },
     // 开启下拉刷新
    "enablePullDownRefresh": true,
     // 下拉刷新配置项
    "backgroundTextStyle": "dark",
    "backgroundColor": "#efefef"
}

1.3. 监听页面的下拉刷新事件

在当前页面的.js文件中,通过onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。通过stopPullDownRefresh()函数来停止恢复下拉框

onPullDownRefresh() {
   
    // 刷新数据的代码块
    // ...
    // 下拉刷新数据后自动回弹  将loading的样式取消
    wx.stopPullDownRefresh()
},

2. 上拉触底事件

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
比如,微信小程序中最常用的,一直往下滑,当快要到达底部时,数据会刷新并且填充到当前页面,这就是上拉触底事件。

2.1. 监听页面的上拉触底事件

在页面的 .js 文件中,通过 onReachBottom() 函数即可监听当前页面的上拉触底事件

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom() {
   
    console.log("触发上拉触底事件")
},

2.2. 配置上拉触底的距离

上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离
小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。


相关文章
微信小程序数据绑定与事件处理:打造动态交互体验
在上一篇中,我们学习了搭建微信小程序开发环境并创建“Hello World”页面。本文深入探讨数据绑定和事件处理机制,通过具体案例帮助你打造更具交互性的小程序。数据绑定使用双花括号`{{}}`语法,实现页面与逻辑层数据的动态关联;事件处理则通过`bind`或`catch`前缀响应用户操作。最后,通过一个简单的计数器案例,巩固所学知识。掌握这些核心技能,将助你开发更复杂的小程序。
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
2660 0
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
8月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
9月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
485 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
12月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2283 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4142 7
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
4728 1