[小程序]页面事件

一、下拉刷新

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
相关推荐
说私域6 分钟前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的餐饮行业私域流量运营策略研究
人工智能·小程序·流量运营
2501_915909065 小时前
Charles中文版使用教程 高效抓包与API调试常见问题处理
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张9 小时前
iOS软件性能监控实战指南 开发到上线的完整流程解析
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld12 小时前
剧本杀小程序系统开发:构建数字化剧本杀生态圈
大数据·小程序·剧本杀
徐礼昭|商派软件市场负责人2 天前
从“多、老、旧”到“4i焕新”:品牌官方商城(小程序/官网/APP···)的范式跃迁与增长再想象
小程序·商城系统·零售
胡西风_foxww2 天前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件
七七软件开发2 天前
一对一交友小程序 / APP 系统架构分析
java·python·小程序·系统架构·php
2501_916007472 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
说私域2 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量拉新策略研究
人工智能·小程序·开源
2501_915918412 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview