uni-app微信小程序上拉加载,下拉刷新

pages.json配置官网链接
onPullDownRefresh、onReachBottom函数跟生命周期同级

data() {return {orderList:[],total: null, //总共多少条数据page: 1,pageSize: 10,}
},
onLoad() {},
mounted(){this.getInfo()
},
methods:{getInfo(){API.getListxxx().then(res => {const newlist = result.contentsthis.orderList.push(...newlist)this.total = result.totalCount})},//通过按钮点击触发下拉刷新fresh(){uni.startPullDownRefresh()}
},
//距离底部100px时(page中配置过),触发该事件页面滚动到底部的事件(不是scroll-view滚到底)
onReachBottom() {let allTotal = this.page * this.pageSizeif (allTotal < this.total) {//当前条数小于总条数 则增加请求页数this.page++;this.getInfo() //调用加载数据方法} else {// console.log('已加载全部数据')}
},
//下拉后触发的事件
onPullDownRefresh() {this.orderList = []//调用获取数据方法this.getInfo()setTimeout(() => {//结束下拉刷新uni.stopPullDownRefresh();}, 1000);
},

onReachBottom (上拉时到底部多少距离触发的事件) 官方语言:页面滚动到底部的事件。可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

//pages.json
{"path": "pages/index/index","style": {"enablePullDownRefresh": true,"onReachBottomDistance":100}
},

也可以每次回到页面就调用下拉刷新(看需求定)

onShow() { //没次回到页面都会调用下拉刷新uni.startPullDownRefresh()
},
onLoad() { //页面最开始调用uni.startPullDownRefresh()
},

下拉刷新

自定义配置,在 App 平台下可以自定义部分下拉刷新的配置 page->style->app-plus->pullToRefresh。
在这里插入图片描述
代码示例

{"pages": [{"path": "pages/index/index", //首页"style": {"app-plus": {"pullToRefresh": {"support": true,"color": "#ff3333","style": "default","offset":"260px","height":"50%","contentdown": {"caption": "下拉可刷新自定义文本"},"contentover": {"caption": "释放可刷新自定义文本"},"contentrefresh": {"caption": "正在刷新自定义文本"}}}}}]
}

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

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

相关文章

JVM的工作流程

目录 1.JVM 简介 2.JVM 执行流程 3. JVM 运行时数据区 3.1 堆&#xff08;线程共享&#xff09; 3.3 本地方法栈&#xff08;线程私有&#xff09; 3.4 程序计数器&#xff08;线程私有&#xff09; 3.5 方法区&#xff08;线程共享&#xff09; 4.JVM 类加载 ① 类…

MM1: Methods, Analysis Insights from Multimodal LLM Pre-training

MM1: Methods, Analysis & Insights from Multimodal LLM Pre-training 相关链接&#xff1a;arxiv 关键字&#xff1a;多模态学习、大型语言模型、预训练、视觉语言连接、混合专家模型 摘要 本文讨论了构建高性能的多模态大型语言模型&#xff08;MLLMs&#xff09;。特别…

uploads-labs靶场(1-10关)

一、搭建环境: 下载upload-labs源代码 下载链接&#xff1a;https://codeload.github.com/c0ny1/upload-labs/zip/refs/heads/master 将压缩包解压后的文件名改为upload-labs&#xff0c;然后放入phpstudy\www目录下 二、关卡通关: 1、pass-01&#xff08;前端绕过&#xf…

(三)丶RabbitMQ的四种类型交换机

前言&#xff1a;四大交换机工作原理及实战应用 1.交换机的概念 交换机可以理解成具有路由表的路由程序&#xff0c;仅此而已。每个消息都有一个称为路由键&#xff08;routing key&#xff09;的属性&#xff0c;就是一个简单的字符串。最新版本的RabbitMQ有四种交换机类型&a…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Grid)

网格容器&#xff0c;由“行”和“列”分割的单元格所组成&#xff0c;通过指定“项目”所在的单元格做出各种各样的布局。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 仅支持GridItem…

【算法专题--双指针算法】leetcode--283. 移动零、leetcode--1089. 复写零

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1. 移动零&#xff0…

使用opencv进行图片分析

opencv学习 一、配置环境并打开编译器 配置opencv在你的任意一个盘里创建一个专属于opencv的文件夹便于学习与整理 打开控制台winr输入cmd&#xff0c;进入后输入conda activate opencv&#xff0c;进入环境以后进入你所设置的opencv文件的盘&#xff0c;我的是D盘&#xff0…

C++_学习String

1.标准库中的string类 1. 字符串是表示字符序列的类 2. 标准的字符串类提供了对此类对象的支持&#xff0c;其接口类似于标准字符容器的接口&#xff0c;但添加了专门用于操作单字节字符字符串的设计特性 3. string 类是使用 char( 即作为它的字符类型&#xff0c;使用它的默…

MATLAB编译器配置:MinGW

使用 MATLAB 2022b版本&#xff0c;查询编译器时如上&#xff0c;想安装个MinGW编译器&#xff0c;自带的附加资源管理不好使&#xff0c;只能换个别的法子&#xff0c;经过一些参考&#xff0c;总结如下。 步骤1.在这里下载一个MinGW.最新版本是10.3.0.然后默认安装&#xff…

音频占用磁盘空间太多 需要把mp3音频转aac音频缩小占用空间 应该怎么操作?

一&#xff1a;什么是aac格式&#xff1f; aac是一种音频压缩格式&#xff0c;它是MPEG-2标准下的一种音频压缩方式&#xff0c;也可以作为HE-AAC&#xff0c;AAC或AAC-LC格式使用&#xff0c;是音频压缩领域中的一种重要格式。与MP3的比较&#xff0c;aac在保证音质的同时可以…

【NR 定位】3GPP NR Positioning 5G定位标准解读(十五)-UL-TDOA 定位

前言 3GPP NR Positioning 5G定位标准&#xff1a;3GPP TS 38.305 V18 3GPP 标准网址&#xff1a;Directory Listing /ftp/ 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;一&#xff09;-CSDN博客 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;…

jenkin部署spring boot项目【从0到1】

写在前面&#xff0c;遇到的很多错误 本来想用docker启动Jenkins的&#xff0c;也这样做了&#xff0c;但是遇到了一个非常严重的问题&#xff0c;就是mvn命令在docker里面不生效&#xff0c;然后就修改文件&#xff0c;但是发现vi不存在&#xff0c;好的。接着用yum安装vi工具…

Windows蓝牙驱动开发之模拟HID设备(一)(把Windows电脑模拟成蓝牙鼠标和蓝牙键盘等设备)

by fanxiushu 2024-03-14 转载或引用请注明原作者 把Windows电脑模拟成蓝牙鼠标和蓝牙键盘&#xff0c;简单的说&#xff0c;就是把笨重的PC电脑当成鼠标键盘来使用。 这应该是一个挺小众的应用&#xff0c;但有时感觉也应该算比较好玩吧&#xff0c; 毕竟实现一种一般人都感觉…

Selenium 自动化 —— 使用WebDriverManager自动下载驱动

上一篇文章 入门和 Hello World 实例 中&#xff0c;我们提供了一个最简单的 Selenium 上手的例子。 但是某一天&#xff0c;突然发现相同的代码居然运行报错了。这是怎么回事呢&#xff1f; 日志排查 日志中其实提示的很明显了&#xff1a;Chrome浏览器和Chrome WebDriver的…

国产Copilot--通义灵码安装教程

文章目录 在 Visual Studio Code 中安装通义灵码步骤1步骤2步骤3步骤4 参考 在 Visual Studio Code 中安装通义灵码 通义灵码&#xff0c;是一款基于通义大模型的智能编码辅助工具&#xff0c;提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解…

Unity开发一个FPS游戏之二

在之前的文章中,我介绍了如何开发一个FPS游戏,添加一个第一人称的主角,并设置武器。现在我将继续完善这个游戏,打算添加敌人,实现其智能寻找玩家并进行对抗。完成的效果如下: fps_enemy_demo 下载资源 首先是设计敌人,我们可以在网上找到一些好的免费素材,例如在Unity…

NCV7356D1R2G接口集成芯片中文资料PDF数据手册参数引脚图规格书价格图片

产品概述&#xff1a; NCV7356 是一款用于单线数据链路的物理层器件&#xff0c;能够使用多种具碰撞分解的载波感测多重存取 (CSMA/CR) 协议运行&#xff0c;如博世控制器区域网络 (CAN) 2.0 版。此串行数据链路网络适用于不需要高速数据的应用&#xff0c;低速数据可在物理介…

nginx gzip性能优化 —— 筑梦之路

对比使用和不使用gzip static处理 1. 不使用 gzip static 时的 gzip 处理 如果你不使用 gzip_static 而只是 "gzip on"&#xff0c;它每次都会被压缩并发送。 虽然它实际上可能缓存在内存中&#xff0c;但传统观点是 "每次都会执行压缩处理&#xff0c;因此 CP…

Hello,Spider!入门第一个爬虫程序

在各大编程语言中&#xff0c;初学者要学会编写的第一个简单程序一般就是“Hello, World!”&#xff0c;即通过程序来在屏幕上输出一行“Hello, World!”这样的文字&#xff0c;在Python中&#xff0c;只需一行代码就可以做到。我们把这第一个爬虫就称之为“HelloSpider”&…

Kotlin:runBlocking导致App应用出现ANR问题实例

runBlocking简介 runBlocking 是常规函数&#xff1b; runBlocking 方法会阻塞当前线程来等待&#xff1b; runBlocking 的主线程会一直 阻塞 直到 runBlocking 内部的协程执行完毕。 runBlocking导致App应用出现ANR问题实例的效果 点击页面上的 刷新按钮 调用 refreshByrunBlo…