[小程序]页面事件

一、下拉刷新

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
相关推荐
hello kitty w3 小时前
2. 微信开发工具快捷键
小程序
计算机毕设指导63 小时前
基于微信小程序的丽江市旅游分享系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·旅游
1024小神3 小时前
浏览器或小程序限制字体最小12px解决办法
小程序
内存不泄露4 小时前
酒店预订管理平台及小程序
小程序
2501_915918414 小时前
除了 Perfdog,如何在 Windows 环境中完成 iOS App 的性能测试工作
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld5 小时前
[特殊字符]短剧小程序开发:开启娱乐新纪元的钥匙[特殊字符]
小程序
qq_12498707536 小时前
基于Spring Boot的“味蕾探索”线上零食购物平台的设计与实现(源码+论文+部署+安装)
java·前端·数据库·spring boot·后端·小程序
m0_471199636 小时前
【小程序】订单数据缓存 以及针对海量库存数据的 懒加载+数据分片 的具体实现方式
前端·vue.js·小程序
難釋懷7 小时前
微信小程序案例 - 自定义 tabBar
微信小程序·小程序·notepad++
2501_915106328 小时前
常见 iOS 抓包工具的使用方式与组合思路
android·ios·小程序·https·uni-app·iphone·webview