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

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

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,在实际开发中,可以根据自己的需求修改这个默认值。


相关文章
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
76 1
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
631 0
|
28天前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
30 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
320 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
55 0
微信小程序更新提醒uniapp
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
115 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
114 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
4月前
|
存储 小程序 JavaScript
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
68 7