当前位置: 首页 > news >正文

[小程序]页面事件

一、下拉刷新

        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

相关文章:

  • 探索哥德巴赫猜想:数学的未解之谜
  • swagger-ui配置错误原因
  • Elasticsearch Index Shard Allocation 索引分片分配策略
  • 140基于matlab的求解转子系统前三个临界转速和主振型的传递矩阵法转子系统的不平衡响应
  • 深入理解C语言(2):字符、字符串与内存函数
  • (Bean工厂的后处理器入门)学习Spring的第七天
  • 【JS逆向学习】36kr登陆逆向案例(webpack)
  • 极客时间-《罗剑锋的 C++ 实战笔记》文章笔记 + 个人思考
  • 【Redis】Redis基础
  • STM32标准库开发——PWM驱动代码
  • SpringMVC获取参数与页面跳转
  • C++ vector 数组转换、查找、最大最小值、排序、排行的几种用法
  • C++ 知识列表【图】
  • 【Linux对磁盘进行清理、重建、配置文件系统和挂载,进行系统存储管理调整存储结构】
  • Docker是什么
  • python3.6+scrapy+mysql 爬虫实战
  • 5、React组件事件详解
  • docker python 配置
  • JavaScript DOM 10 - 滚动
  • markdown编辑器简评
  • Vue全家桶实现一个Web App
  • 高程读书笔记 第六章 面向对象程序设计
  • 回顾2016
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 实战:基于Spring Boot快速开发RESTful风格API接口
  • 微信开源mars源码分析1—上层samples分析
  • 用Python写一份独特的元宵节祝福
  • 原生 js 实现移动端 Touch 滑动反弹
  • #LLM入门|Prompt#1.7_文本拓展_Expanding
  • #pragma once与条件编译
  • %@ page import=%的用法
  • (bean配置类的注解开发)学习Spring的第十三天
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (第8天)保姆级 PL/SQL Developer 安装与配置
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (二)windows配置JDK环境
  • (附源码)springboot 基于HTML5的个人网页的网站设计与实现 毕业设计 031623
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (附源码)ssm基于微信小程序的疫苗管理系统 毕业设计 092354
  • (附源码)计算机毕业设计SSM保险客户管理系统
  • (七)Java对象在Hibernate持久化层的状态
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (转)linux 命令大全
  • .gitignore文件_Git:.gitignore
  • .NET Conf 2023 回顾 – 庆祝社区、创新和 .NET 8 的发布
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .NET MAUI学习笔记——2.构建第一个程序_初级篇
  • .NET Micro Framework 4.2 beta 源码探析
  • .NET 反射的使用
  • .NET/C# 在 64 位进程中读取 32 位进程重定向后的注册表
  • .NET:自动将请求参数绑定到ASPX、ASHX和MVC(菜鸟必看)
  • .NET成年了,然后呢?
  • .NET下的多线程编程—1-线程机制概述
  • .net用HTML开发怎么调试,如何使用ASP.NET MVC在调试中查看控制器生成的html?
  • @hook扩展分析