[小程序]页面事件

一、下拉刷新

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
相关推荐
2501_9159090620 小时前
iOS 应用反调试技详解术 检测调试器的原理与防护实践
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张1 天前
iOS加固技术路线全面解析:Bitcode模式、源码模式与汇编模式对比及爱加密优势
android·汇编·ios·小程序·uni-app·cocoa·iphone
海纳百川·纳海川1 天前
租房行业数字化:换个思路解决“老问题”
大数据·微信小程序·小程序
上海云盾-小余2 天前
CC 高频请求 + DDoS 流量攻击实战防御:全链路 WAF 流量清洗部署完整流程
网络·爬虫·安全·小程序·ddos
2501_916008892 天前
iOS IPA文件反编译与打包操作方法,拆包分析防护和加固打包
android·macos·ios·小程序·uni-app·cocoa·iphone
2301_810313182 天前
海外教育APP定制发展现状与开发选型核心要点解析
小程序·团队开发·软件需求
2501_915921432 天前
iOS手游安全反外挂解决方案:基于Xcode的加固混淆特色详解
android·安全·ios·小程序·uni-app·iphone·xcode
禾高网络2 天前
回收小程序在环保和商业领域发挥更大的作用
java·大数据·人工智能·小程序
2501_916007472 天前
iOS App分发教程 App Store、TestFlight 与 Ad Hoc 的配置与上传方法
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者83 天前
iOS应用加固方案全解析:源码加固与IPA在线加固对比
android·macos·ios·小程序·uni-app·cocoa·iphone