[小程序]页面事件

一、下拉刷新

1.开启和配置

小程序中开启下拉刷新的方式有两种:

①全局开启下来刷新

在app.json的window节点中,设置enablePullDownRefresh设为ture。

②局部开启下来刷新

在页面对应的json文件的的window节点中,设置enablePullDownRefresh设为ture。

还可以通过设置backgroundColor和backgroundTextStyle来配置下拉窗口的颜色的loading样式。

复制代码
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle":"dark"

2.监听新事件

在对应页面的js文件中使用**onPullDownRefresh()**进行监听。

复制代码
<view>下拉次数{{Timer}}</view>

  onPullDownRefresh() {
    this.setData({Timer:this.data.Timer+1});
    wx.stopPullDownRefresh(); //处理完成,停止下拉刷新效果
  },

二、上拉触底

1.触底监听

在页面的js文件中使用**onReachBottom()**进行监听

复制代码
  onReachBottom() {
    this.setData({More:this.data.More+1});
  },

需要注意的是,使用这个事件需要页面可以向下滑动(即存在列表或页面长于手机屏幕)

通过onReachBottomDistance来配置上拉触底的行程(默认50px)。

2.请求节流

如果在短时间内触底多次,会造成多次请求数据,所以需要在输出处理过程中对请求进行节流。

思路是设置一个标志位isloading,在监听的处理函数中检查这个标志位,并在处理完成后将标志位复位,在复位之前不再响应下拉。

三、Loading效果

loading效果不属于页面事件,但是多与页面事件联用,故也放在这里。

loading框需要使用wx.showLoading()函数显示调用,并使用wx.hideLoading()函数隐藏

复制代码
wx.showLoading({title:'数据加载中...'})    //唤起loading
wx.hideloading()                          //隐藏loading
相关推荐
Chengbei114 小时前
DSH渗透测试插件dsh-pentest全新升级!适配DeepSeek Harness,可视化探索链路,一键搭建轻量化AI渗透测试环境。
人工智能·web安全·网络安全·微信·小程序·系统安全·安全架构
2601_949950637 小时前
用练题簿小程序把课件做成可以在线刷题的内容
小程序·练习·小程序推荐
一几文10 小时前
2026年上半年软考高级-系统架构设计师考试真题回顾与解析-综合知识选择题6
小程序·架构·系统架构·软考高级·软考·it证书
zhangminghuan13 小时前
微信小程序开发核心知识点全景解析(前端必备硬核基础)
前端·微信小程序·小程序
游戏开发爱好者814 小时前
开心上架是什么,一站式 Apple 开发者工作台总览
android·小程序·https·uni-app·iphone·webview
sltin15 小时前
需求到落地:我如何在微信小程序里实现证件照换底、隐私打码与水印相机
数码相机·微信小程序·小程序
软件聚导航18 小时前
软件聚导航-前端工程师的“小家庭”,工具与生活并存
人工智能·小程序·学习方法·图片压缩
咸虾米_2 天前
小程序流量主哪种广告最赚钱?各类广告收益与实操建议
微信小程序·小程序·小程序开发·流量主广告
show4332 天前
2026小程序端AI配音技术实现:TTS多音色引擎集成与MP3生成性能优化
人工智能·性能优化·小程序
00后程序员张2 天前
Windows / Linux / Mac 上不用 Xcode 把 IPA 上传到 App Store,upload 命令详解
android·ios·小程序·https·uni-app·iphone·webview