微信小程序--开启下拉刷新页面

1、下拉刷新获取数据enablePullDownRefresh

开启下拉刷新:

enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新

案例: 

 下拉刷新,获取新的列表数据,其实就是进行一次新的网络请求:

第一步:在.json文件中开启下拉刷新

{"usingComponents": {},"enablePullDownRefresh":true,"backgroundColor": "#6D9AD6"}

第二步:在.js配置文件中找到下拉刷新处理函数:

// pages/wxRequest/wxRequest.js
Page({/*** 页面的初始数据*/data: {listArr:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getData();},getData(){wx.showLoading({title: '网络加载中...',mask:true//遮罩层,防止用户误触})wx.request({url: 'https://api.thecatapi.com/v1/images/search?limit=2',success:res=>{console.log(res)this.setData({listArr:res.data})//当网络请求完成后,我们要自动的把下拉刷新的样式关闭掉,要不然不好看:wx.stopPullDownRefresh() },complete:res=>{//无论网络请求是否成功,都要关闭loading样式:wx.hideLoading()}})},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.setData({//细节:其实我们下拉刷新后,应该先把页面清空,再获取新的数据://只不过页面清空效果很快,肉眼看不太出来listArr:[]  })this.getData();},

细节一:当网络请求完成后,我们要自动的把下拉刷新的样式关闭掉,要不然不好看:

  • wx.stopPullDownRefresh(Object object):停止当前页面下拉刷新;
  • wx.startPullDownRefresh(Object object):开始下拉刷新。调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
   /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {//细节:其实我们下拉刷新后,应该先把页面清空,再获取新的数据://只不过页面清空效果很快,肉眼看不太出来this.setData({listArr:[]  })this.getData();},

细节二:在页面加载完毕前,应该添加一个wx.showLoading()提示用户正在加载,网络请求完成后,就关闭这个加载动作

                ​​​​​​​        ​​​​​​​        

  getData(){wx.showLoading({title: '网络加载中...',mask:true//遮罩层,防止用户误触})wx.request({url: 'https://api.thecatapi.com/v1/images/search?limit=2',success:res=>{console.log(res)this.setData({listArr:res.data})//当网络请求完成后,我们要自动的把下拉刷新的样式关闭掉,要不然不好看:wx.stopPullDownRefresh() //当网络请求完成后,还要关闭loading样式:wx.hideLoading()}})},

 细节三:如果网络请求失败呢?例如接口失效:

successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
getData(){wx.showLoading({title: '网络加载中...',mask:true//遮罩层,防止用户误触})wx.request({url: 'https://api.thecatapi.com/v1/images/search?limit=2',success:res=>{console.log(res)this.setData({listArr:res.data})//当网络请求完成后,我们要自动的把下拉刷新的样式关闭掉,要不然不好看:wx.stopPullDownRefresh() },complete:res=>{//无论网络请求是否成功,都要关闭loading样式:wx.hideLoading()}})},

2、触底加载更多的数据onReachBottom

在js中找到触底事件对应的处理函数:

 /*** 页面上拉触底事件的处理函数*/onReachBottom() {},

距离底部多少的时候触发我们的触底事件 默认是50px 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/746551.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI程序员Devin会在6个方面影响人类程序员

讲动人的故事,写懂人的代码 初创公司Cognition最近所发布的世界上首个AI程序员Devin,让人类程序员百感交集。因为Devin能自动干下面的事情: 自己学习不熟悉的技术; 端到端地自己搭建和部署应用程序; 自己找出并修复…

如何根据主机监听端口号查找到对应docker容器

如何根据主机监听端口号查找到对应docker容器 问题描述 使用了一个端口是31883,这是个mq的端口号,但是怎么都找不到是哪个docker容器启用的 问题尝试解决 使用命令lsof -i:31883 如图 然后接着使用 ps -ef|grep 1128796,如图根本查不出来任…

扩展资料主机名到IP地址的有两种方式:DNS

中国联通的DNS地址有两种。 主 DNS 为“210.21.4.130”,备用 DNS 为“221.5.88.88”。 每个 IP 地址可以有一个主机名。 主机名由一串或多串字符组成。 用小数点分隔字符串。 对于中国联通宽带用户,主DNS设置为:210.21.4.130,备用…

c++ 面试100个题目中的编程题目

88、下列程序的运行结果是? #include <stdlib.h> #include <stdio.h> #include <string.h> #include <iostream> const char* str = "vermeer"; using namespace std; int main(){ const char* pstr = str;cout << "The add…

Devin横空出世,历史第一位人工智能软件工程师

大男主爽文的一刻&#xff0c;AI领域最近横空出世的Devin问世&#xff0c;可谓一石激起千层浪&#xff0c;让我们看这个创造出AI软件工程师的产品公司背景如何 2024年3月13日&#xff0c;Cognition AI在 X 上推出了全球首个AI软件工程师Devin&#xff0c;请记住这个名字。它在英…

光伏行业如何起步?光伏业务管理软件是重点!

随着全球对可再生能源的需求日益增强&#xff0c;光伏行业作为其中的佼佼者&#xff0c;正迎来前所未有的发展机遇。然而&#xff0c;如何在这一领域成功起步&#xff0c;却是许多企业和个人面临的挑战。在这个过程中&#xff0c;光伏业务管理软件的重要性不容忽视。 光伏行业的…

HarmonyOS NEXT应用开发—使用弹簧曲线实现抖动动画及手机振动效果案例

介绍 本示例介绍使用vibrator.startVibration方法实现手机振动效果&#xff0c;用animateTo显示动画实现点击后的抖动动画。 效果图预览 使用说明 加载完成后显示登录界面&#xff0c;未勾选协议时点击一键登录按钮会触发手机振动效果和提示文本的抖动动画。 实现思路 创建…

计算机组成原理练习-计算机工作过程

高级语言与机器语言之间的转换 ------------------------------------------------------------------------------------------------------------------------------- 1.将高级语言源程序转换为机器级目标代码文件的程序是&#xff08;&#xff09;。 A.汇编程序 …

【HyperLips:】数字人——控制嘴唇 项目源码python实现

最近受到商汤“复活”汤晓鸥的视频刺激&#xff0c;大大的amazing&#xff01;没看过的小伙伴可以自行百度&#xff0c;看了不研究一下【数字人】技术&#xff0c;都要跟时代脱轨了&#xff0c;那就以HyperLips为开篇吧。 目录 &#x1f34e;&#x1f34e;1.摘要 &#x1f3…

浅谈C/C++的new和delete以及对象池的实现

今天我们来谈谈C中的new和delete&#x1f60a;&#x1f60a;&#x1f60a;。在软件开发中,常常需要动态地分配和撤销内存空间&#xff0c;C语言中利用库函数malloc和free分配和撤销内存空间的。而在C中则是 new和delete malloc函数时必须指定需要开辟的内存空间的大小&#xf…

【vue baidu-map】实现百度地图展示基地,鼠标悬浮标注点展示详细信息

实现效果如下&#xff1a; 自用代码记录 <template><div class"map" style"position: relative;"><baidu-mapid"bjmap":scroll-wheel-zoom"true":auto-resize"true"ready"handler"><bm-mar…

为何虎茅掌柜 短短6个月会员近百万 月销售额破亿!

大家好 我是吴军 一家软件开发公司的产品经理 今天我们来分析一下&#xff0c;一个卖酒的模式 为什么这家平台短短6个月&#xff0c;发展百万名用户&#xff0c;月销售额破亿! 虎茅掌柜&#xff0c;切记这个虎茅和茅台的那个没有任何关系 虎茅掌柜 虎茅掌柜实质上是一种…

Spring Bean的生命周期流程

前言 Java 中的公共类称之为Java Bean&#xff0c;而 Spring 中的 Bean 指的是将对象的生命周期&#xff0c;交给Spring IoC 容器来管理的对象。所以 Spring 中的 Bean 对象在使用时&#xff0c;无需通过 new 来创建对象&#xff0c;只需要通过 DI&#xff08;依赖注入&#x…

2024 MCM数学建模美赛2024年A题复盘,思路与经验分享:资源可用性与性别比例 | 七鳃鳗的性别比例变化对生态系统稳定性的影响(四)

审题 第三问要我们评估七鳃鳗的性别比例变化对生态系统稳定性的影响。 这里我们就要去查一下生态系统稳定性的定义。 通过查资料我们知道&#xff0c;生态系统稳定性包括生态系统的抵抗力和恢复力。 OK&#xff0c;到这里问题就变成了&#xff0c;七鳃鳗的性别比例对生态系…

漏洞复现-H3C系列

漏洞复现-H3C H3C 用户自助服务平台远程命令执行漏洞H3C堡垒机H3C防火墙 admin/adminH3C root/h3c123.com【漏洞复现】华三用户自助服务产品dynamiccontent.properties.xhtml接口处存在RCE漏洞H3C交换机H3C cas_cvm_upload-RCE (默认写入冰蝎4.0. 3aes)H3C CVM任意文件上传漏洞…

Java 根据IP获取IP地址信息(离线)

<!-- https://mvnrepository.com/artifact/org.lionsoul/ip2region --><dependency><groupId>org.lionsoul</groupId><artifactId>ip2region</artifactId><version>2.7.0</version></dependency> 地址&#xff1a;http…

【计算机网络】1.5 分组交换网中的时延、丢包和吞吐量

A.分组交换网中的时延 当分组从一个节点沿着路径到后一节点时&#xff0c;该分组在沿途的各个节点经受了几种不同类型的时延。 时延的类型 处理时延 - d n o d a l d_{nodal} dnodal​ 处理时延包括以下部分—— a. 检查分组首部 b. 决定分组导向 排队时延 - d p r o c d_{…

算法基础杂项

目录 1算法最优解 2.时间复杂度排序 3.对数器 1算法最优解 1.首先&#xff0c;保证时间复杂度最低 2.其次&#xff0c;保证空间复杂度最低 3.常数项低不低&#xff0c;一般没人管 2.时间复杂度排序 3.对数器 import java.util.Arrays;public class Test {public static …

Elasticsearch使用Kibana进行基础操作

一、Restful接口 Elasticsearch通过RESTful接口提供与其进行交互的方式。在ES中&#xff0c;提供了功能丰富的RESTful API的操作&#xff0c;包括CRUD、创建索引、删除索引等操作。你可以用你最喜爱的 web 客户端访问 Elasticsearch 。事实上&#xff0c;你甚至可以使用 curl …

Autoware.auto源码安装

自 2022 年以来&#xff0c;已将 Autoware 的开发迁移到 GitHub。目前Auto版本并没有进行最新维护 一、官网 Autoware.Auto (autowarefoundation.gitlab.io) 二、介绍 Autoware是世界上第一个由Autoware基金会托管的用于自动驾驶汽车的“一体化”开源软件。基于 ROS 2 的 Au…