[小程序]页面事件

一、下拉刷新

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
相关推荐
扶风ff4 小时前
求职笔试资料太散?用练题簿在线刷题,按岗位整理练习清单
前端·学习·小程序
Ai-_Man11 小时前
请问豆包的智能体聊天记录该怎么弄
开发语言·前端·javascript·人工智能·小程序·ecmascript·电脑
Ai-_Man1 天前
您您这可以把Dola的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。用AI导出鸭,答案是可以的
开发语言·前端·人工智能·小程序
2601_949950631 天前
练题簿小程序的 4 个功能,把学习资料变成题库
人工智能·小程序·刷题·练习·小程序推荐
Mingprime1 天前
短时冲刺,孤军奋战,压力山大
小程序
Mingprime1 天前
孤军奋战那一次
小程序
盟道科技1 天前
电商小程序购物车系统设计:缓存与数据库双写一致性实战
数据库·缓存·小程序
卓怡学长1 天前
w193基于springboot“乐通黄骅”电动车智能充电服务小程序
java·spring boot·spring·小程序·intellij-idea
扶风ff2 天前
新品知识更新太快?用练题簿在线刷题,安排企业培训的小测与复盘
前端·学习·小程序
Ai-_Man2 天前
您您这可以把Microsofat Copilot的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑·copilot