【小程序】页面事件

简介: 【小程序】页面事件

下拉刷新事件

1. 什么是下拉刷新

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

2. 启用下拉刷新

启用下拉刷新有两种方式:


全局开启下拉刷新


在 app.json 的 window 节点中,将 enablePullDownRefresh 设置为 true


局部开启下拉刷新


在页面的 .json 配置文件中,将 enablePullDownRefresh 设置为 true


在实际开发中,推荐使用第 2 种方式,为需要的页面单独开启下拉刷新的效果。


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


在全局或页面的 .json 配置文件中,通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷


新窗口的样式,其中:


backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值  


backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light


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


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

在页面的 wxml 中有如下的 UI 结构,点击按钮可以让 count 值自增 +1:


5a4bb6de2f084f3ea624eb6a9ef98f07.png

在触发页面的下拉刷新事件的时候,如果要把 count 的值重置为 0,示例代码如下:


daea88057b53479b89e7d3becda05174.png

5. 停止下拉刷新的效果

当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的 loading 效果。此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下:


b198f19099d64165ba4a45ce77220c5d.png

上拉触底事件

1. 什么是上拉触底

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

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

在页面的 .js 文件中,通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下:

df6227f5726e4f28a6aea0a466d95def.png


3. 配置上拉触底距离


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


上拉触底案例

1. 案例效果展示


3f6ed44537d24b4fa45b69d905b9ebda.png

2. 案例的实现步骤


定义获取随机颜色的方法

在页面加载时获取初始数据

渲染 UI 结构并美化页面效果

在上拉触底时调用获取随机颜色的方法

添加 loading 提示效果

对上拉触底进行节流处理


3. 步骤1 - 定义获取随机颜色的方法


e8456d2f595247ffa2cce1430f6dc1ce.png

3. 步骤2 - 在页面加载时获取初始数据

01c09fd61b48420fa0fa48f700661a33.png

3. 步骤3 - 渲染 UI 结构并美化页面效果

5a5a5d19f1b14c8c8062306d15f1361a.png

3. 步骤4 - 上拉触底时获取随机颜色


3dda8b034fc240f5ac8a2e854bd31c0a.png

3. 步骤5 - 添加 loading 提示效果


1f2fc927e0124ee8b163a8e27b246e0d.png

3. 步骤6 - 对上拉触底进行节流处理


在 data 中定义 isloading 节流阀


false 表示当前没有进行任何数据请求


true 表示当前正在进行数据请求


在 getColors() 方法中修改 isloading 节流阀的值


在刚调用 getColors 时将节流阀设置 true


在网络请求的 complete 回调函数中,将节流阀重置为 false


在 onReachBottom 中判断节流阀的值,从而对数据请求进行节流控制


如果节流阀的值为 true,则阻止当前请求 如果节流阀的值为 false,则发起数据请求  


自定义编译模式

cb7926833e2246f6819ae40d71908520.png


相关文章
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
93 1
|
3月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
4月前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
4月前
|
缓存 小程序 数据库
小程序页面之间(传值)传递数据的方法
小程序页面之间(传值)传递数据的方法
195 63
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
3月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
3月前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
428 5
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
4月前
|
小程序 开发者
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
这篇文章分享了四个不同应用场景下的微信小程序个人主页的源代码和页面效果展示,包括商城系统、外卖系统、医疗挂号和电影购票系统的个人主页。提供了完整的页面布局和样式代码,允许开发者直接复制粘贴并根据自己的项目需求进行简单的改造使用。
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
|
5月前
|
小程序
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异