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": "正在刷新自定义文本"}}}}}]
}
相关文章:
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…...
HTML案例-2.标签综合练习
目录 效果 知识点 1.图像标签 2.链接标签 3.锚点定位 4.base标签 源码 页面1 页面2 效果 知识点 1.图像标签 <img src="图像URL" /> 单标签 属性 属性值 描述 src URL 图像的路径 alt 文本...
C++中的多值返回:解锁函数返回值的神奇力量
C中的多值返回:解锁函数返回值的神奇力量 在C编程中,有时候我们需要从函数中返回多个值。虽然C中的函数通常只能返回一个值,但有几种技术和惯用法可以实现返回多个值的效果。本文将介绍C中实现多值返回的几种常用方法,包括引用、指…...
D咖智能咖啡机:营业利器,品质与效率的完美结合
D咖作为中国知名国产商用全自动咖啡机品牌,持续引领商用全自动智能咖啡机赛道技术、产品、创新的行业新标准,目前为全国几十个地区提供全场景自助咖啡机解决方案,并获得了广泛的认可和口碑。 一、便捷操作:一键即可享受美味咖啡 在…...
江科大stm32学习笔记【6-2】——定时器定时中断定时器外部时钟
一.定时器定时中断 1.原理 2.硬件 3.程序 此时CK_PSC72M,定时1s,也就是定时频率为1Hz,所以可以PSC7200-1,ARR10000-1。 Timer.c: #include "stm32f10x.h" // Device headerextern uint16_t Num;//声明跨文件的…...
go优雅重试
实现思路: 重试配置定义最大重试次数和固定重试间隔;使用接口优雅传递可选重试配置参数;重试的模板方法必须返回错误,且只有一个返回值;如果需要使用被重试方法的返回值,使用匿名方法包一层真实方法并在匿…...
Python最常用的库
本文章主要为大家总结,9个Python最常用的包及使用案例 1 NumPy 描述: NumPy 是 Python 的一个扩展库,支持高维数组与矩阵运算,并为数组运算提供了大量的数学函数库。它是科学计算中的基础包之一,用于处理大型多维数组和矩阵的运…...
C++面试100问(八)
C中栈溢出的解决办法有哪些? 1)、增加栈内存的数目;如果是不超过栈大小但是分配值小的,就增大分配的大小 2)、使用堆内存;具体实现由很多种方法可以直接把数组定义改成指针,然后动态申请内存;也可以把局部变…...
【Git】Github 上commit后,绿格子contribution却不显示?不知道怎么弥补?解决方法在这里
github 上commit后,绿格子(contribution)却不显示 问题描述 今天一直在github上面commit代码,但是github中并没有显示自己的contribution(没有绿色的格子),全是空白,网上一查是因为…...
【Vue3】源码解析-Runtime
文章目录 系列文章packages/runtime-dom/src/index.ts初始化创建renderermount \src\runtime-core\component.jsh.tspackages/runtime-core/src/renderer.ts挂载及卸载DOM节点render packages/runtime-dom/src/nodeOps.tspackages/runtime-core/src/apiCreateApp.ts创建appmoun…...
常见面试题之计算机网络
1. OSI 五层模型(或七层模型)是什么,每一层的作用是什么 应用层:又可细分为应用层、表示层、会话层。其中应用层主要做的工作就是为应用程序提供服务,常见的协议为 HTTP、HTTPS、DNS等;表示层主要做的工作…...
C++进阶:详解多态(多态、虚函数、抽象类以及虚函数原理详解)
C进阶:详解多态(多态、虚函数、抽象类以及虚函数原理详解) 结束了继承的介绍:C进阶:详细讲解继承 那紧接着的肯定就是多态啦 文章目录 1.多态的概念2.多态的定义和实现2.1多态的构成条件2.2虚函数2.2.1虚函数的概念2…...
【Hadoop大数据技术】——MapReduce经典案例实战(倒排索引、数据去重、TopN)
📖 前言:MapReduce是一种分布式并行编程模型,是Hadoop核心子项目之一。实验前需确保搭建好Hadoop 3.3.5环境、安装好Eclipse IDE 🔎 【Hadoop大数据技术】——Hadoop概述与搭建环境(学习笔记) 目录 &#…...
02、字面量与变量
二、字面量与变量 文章目录 二、字面量与变量1、字面量字面量类型扩展:特殊字符 2、变量进制转换 3、数据类型 1、字面量 字面量又叫做常量,字面值常量,告诉程序员数据在程序中的书写格式。 字面量类型 整数类型(int):不带小数点…...
docker的常用指令
docker的常用指令 从docker镜像仓库,搜索所有和mysql有关的镜像 docker search mysql 从docker仓库拉取mysql docker pull mysql这里的mysql是指使用search搜索出来的所有容器的NAME 如果和我一样遇到以下问题: 我可以登录阿里云的官网,找…...
19 OpenCV 霍夫曼变换检测圆
文章目录 cv::HoughCircles算子参数示例 cv::HoughCircles 因为霍夫圆检测对噪声比较敏感,所以首先要对图像做中值滤波。 基于效率考虑,Opencv中实现的霍夫变换圆检测是基于图像梯度的实现,分为两步: 检测边缘,发现可能…...
leetcode代码记录(摆动序列
目录 1. 题目:2. 我的代码:小结: 1. 题目: 如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为 摆动序列 。第一个差(如果存在的话)可能是正数或负数。仅有一个元素或者含两个不等…...
django学习笔记
django学习笔记 http://djangobook.py3k.cn/2.0/chapter05/ 文章目录 django学习笔记模型 models.py1、定义数据模型2、模型安装3、创建数据表4、数据表的增删改查4.1 增加4.2 删除4.3 修改4.4 查询4.5 模糊查询4.6 排序&连锁查询4.7 限制返回数据 5、模型使用实战 模型 m…...
Python环境安装及Selenium引入
Python环境安装 环境下载 Download Python | Python.org 环境安装 需使用管理员身份运行 查看环境是否安装成功 python --version 如果未成功则检查环境变量配置 安装 Selenium 库 pip install selenium Selenium 可以模拟用户在浏览器中的操作,如点击按钮、填写…...
【gpt实践】实用咒语分享
直接上咒语了,大家可以自行实践。 1、忽略先前所有的提示 有时候gpt会停留在之前的问题中,导致回答当前问题带着之前问题结论。 2、忽略所有的客套话 我们只是需要有用的信息,有时候gpt客套话会混淆视听。 3、给出非常简短明确的答案 同样…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
springboot 日志类切面,接口成功记录日志,失败不记录
springboot 日志类切面,接口成功记录日志,失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
