[小程序]页面事件

news/2024/7/20 1:34:17 标签: 小程序

一、下拉刷新

        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


http://www.niftyadmin.cn/n/5339552.html

相关文章

​WordPress顶部管理工具栏怎么添加一二级自定义菜单?

默认情况下&#xff0c;WordPress前端和后台页面顶部都有一个“管理工具栏”&#xff0c;左侧一般就是站点名称、评论、新建&#xff0c;右侧就是您好&#xff0c;用户名称和头像。那么我们是否可以在这个管理工具栏中添加一些一二级自定义菜单呢&#xff1f; 其实&#xff0c…

机器学习实验报告——EM算法

目录 一、算法介绍 1.1算法背景 1.2算法引入 1.3算法假设 1.4算法原理 1.5算法步骤 二、算法公式推导 2.1数学基础 2.2EM算法推导 三、算法实现 3.1关于EM聚类 3.2EM工具包的使用 3.3 实例测试 四、算法讨论 4.1EM算法的优缺点 4.2EM算法的应用 4.3对于EM算法…

Linux查找日志常用命令

tail tail命令常使用选项-f -f, --follow[{name|descriptor}]output appended data as the file grows;an absent option argument means descriptor例如&#xff1a; tail -1000f sys.log按回车键增加空白行&#xff0c;按Ctrl C 结束 vi / vim vi 文件名 如&#xff1a;…

深入理解Rust语句和表达式

文章目录 一、概述二、语句三、表达式 团队博客: 汽车电子社区 一、概述 fn add_with_extra(x: i32, y: i32) -> i32 {let x x 1; // 语句let y y 5; // 语句x y // 表达式 }语句会执行一些操作但是不会返回一个值&#xff0c;而表达式会在求值后…

【Leetcode】410. 分割数组的最大值

文章目录 题目思路1.max_element2.partial_sum3.upper_bound4.distance 代码运行结果 题目 题目链接 给定一个非负整数数组 nums 和一个整数 k &#xff0c;你需要将这个数组分成 k 个非空的连续子数组。 设计一个算法使得这 k 个子数组各自和的最大值最小。 示例1&#xff1…

CCF ---- 仓库规划

题目描述&#xff1a; 西西艾弗岛上共有n个仓库&#xff0c;依次编号为1~n。 每个仓库均有一个m维向量的位置编码&#xff0c;用来表示仓库间的物流运转关系。 具体来说&#xff0c;每个仓库i均可能有一个上级仓库j&#xff0c;满足:仓库j位置编码的每一维均大于仓库i位置编码的…

《WebKit 技术内幕》之七(4): 渲染基础

4 WebKit软件渲染技术 4.1 软件渲染过程 在很多情况下&#xff0c;也就是没有那些需要硬件加速内容的时候&#xff08;包括但不限于CSS3 3D变形、CSS3 03D变换、WebGL和视频&#xff09;&#xff0c;WebKit可以使用软件渲染技术来完成页面的绘制工作&#xff08;除非读者强行…

力扣刷题第八天 最大交换

给定一个非负整数&#xff0c;你至多可以交换一次数字中的任意两位。返回你能得到的最大值。 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7。示例 2 : 输入: 9973 输出: 9973 解释: 不需要交换。注意: 给定数字的范围是 [0, 10^8] 方法一&#xff1a;直接遍历 由于对…