本文介绍: 小程序的页面事件,包含上拉和下拉

一、下拉刷新

        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

原文地址:https://blog.csdn.net/weixin_37878740/article/details/135733172

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_61731.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注