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.mzph.cn/news/747045.shtml

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

相关文章

探索TikTok云手机在社交媒体营销的作用

近年来&#xff0c;TikTok作为全球短视频平台之一&#xff0c;其用户基数呈现持续增长的趋势。伴随社交媒体的蓬勃发展&#xff0c;企业和个人纷纷涌入TikTok平台&#xff0c;追求更广泛的曝光和用户互动。为满足这一需求&#xff0c;TikTok云手机应运而生。本文将深度剖析TikT…

蓝桥杯[OJ 1621]挑选子串-CPP-双指针

目录 一、题目描述&#xff1a; 二、整体思路&#xff1a; 三、代码&#xff1a; 一、题目描述&#xff1a; 二、整体思路&#xff1a; 要找子串&#xff0c;则必须找头找尾&#xff0c;找头可以遍历连续字串&#xff0c;找尾则是要从头的基础上往后遍历&#xff0c;可以设头…

【JS逆向学习】猿人学第六题 js混淆 回溯

逆向目标 网址&#xff1a;https://match.yuanrenxue.cn/match/6接口&#xff1a;https://match.yuanrenxue.cn/api/match/6参数&#xff1a;payload(m、q) 逆向过程 老规矩&#xff0c;先来分析网络请求&#xff0c;加密的地方一目了然&#xff0c;没什么可多说的&#xff…

【阿里云系列】-部署ACK集群的POD应用日志如何集成到日志服务(SLS)中

介绍 我们在实际部署应用到阿里云的ACK集群后&#xff0c;由于后期应用服务的持续维护诉求可能需要跟踪排查问题&#xff0c;此时就要具备将应用的历史日志存档便于后期排查问题 处理方式 为了解决以上的普遍需求&#xff0c;需要将ACK中的应用日志采集到SLS的Logstore中,然…

通付盾Web3专题 | SharkTeam:2023年加密货币犯罪分析报告

2023年&#xff0c;Web3行业共经历了940多起大大小小的安全事件&#xff0c;同比2022年增长了超过50%&#xff0c;损失金额达到17.9亿美元。其中&#xff0c;第三季度发生的安全事件最多&#xff08;360起&#xff09;&#xff0c;损失最大&#xff08;7.4亿美元&#xff09;&a…

CMS垃圾收集

初始标记 需要暂停所有的其他线程&#xff0c;但这个阶段会很快完成。它的目的是标记所有的根对象&#xff0c;以及被根对象直接引用的对象&#xff0c;以及年轻代指向老年代的对象&#xff0c;不会遍历对象关系&#xff0c;单线程执行。 并发标记阶段 不需要暂停应用线程&a…

数据集成平台选型建议

一 数据集成介绍 数据集成平台是一种用于管理和协调数据流动的软件工具或服务。它的主要目标是将来自多个不同数据源的数据整合到一个统一的、易于访问和分析的数据存储库中。这些数据源可以包括数据库、云应用、传感器、日志文件、社交媒体等等。数据集成平台的关键任务是确保…

linux 搞一个后悔药(回收站)—— 筑梦之路

主要功能 de&#xff08;删除&#xff09; dr&#xff08;撤销&#xff09; dl&#xff08;列出回收站&#xff09; cleardall&#xff08;清空回收站&#xff09; 如何实现 1. 创建一个隐藏目录 mkdir -p ~/.Recycle_bin 2. 修改 ~/.bashrc vim ~/.bashrc# 添加如下内容al…

[JavaWeb学习日记]Vue工程,springboot工程整合Mybatis,数据库索引

目录 一.Vue工程 安装NodeJS与Vue-cli Vue项目创建 启动Vue项目&#xff1a;点击npm脚本serve 改端口&#xff1a;在vue.config.js下 Vue文件组成&#xff1a;templatescriptstyle 使用element 前端服务器当前使用Ngix 主要编写的文件 二.SpringBoot的Web工程 启动带…

Android红外遥控ConsumerIrManager

目录 一、申请权限 二、ConsumerIrManager(消费者红外管理器) 三、判断是否有红外功能 四、发射红外信号 1.准备用于发射的信息 2.消费者红外管理器发射信息 五、案例代码一览 红外遥控是一种近红外光线(频率为几万赫兹)作为遥控光源的遥控方式。 在Android4.4后提供了…

腾讯云4核8G服务器支持多少人在线?CPU性能如何?

腾讯云轻量4核8G12M服务器配置446元一年&#xff0c;646元12个月&#xff0c;腾讯云轻量应用服务器具有100%CPU性能&#xff0c;系统盘为180GB SSD盘&#xff0c;12M带宽下载速度1536KB/秒&#xff0c;月流量2000GB&#xff0c;折合每天66.6GB流量&#xff0c;超出月流量包的流…

uniapp-vue3 项目初始化集成配置【开箱即用】

地址 https://gitee.com/charrie/vue3-uniapp-init 部分截图展示 技术说明 采用vue3viteuniapp技术栈&#xff0c;setup语法糖编码方式使用完全免费的sard-uniapp组件库引入unocss量子化样式引擎&#xff0c;动态css不用自己写样式&#xff0c;引用class即可&#xff0c;降低…

【SQL注入】Sqlmap使用指南(手把手保姆版)持续更新

文章目录 一、sqlmap介绍二、sqlmap命令行参数用法讲解2.1常用用法-u--batch--flush-session--dbms--level--random-agent--user-agent--tamper--technique-p--skip基础用法查询列表2.2 高阶用法-v高阶用法查询列表 一、sqlmap介绍 官网下载地址&#xff1a;https://github.co…

【LeetCode热题100】138. 随机链表的复制(链表)

一.题目要求 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值…

微信小程序H5设置全局弹窗

微信小程序&H5设置全局弹窗 微信小程序&H5设置全局弹窗效果图1、下载所需库2、创建vue.config.js 文件3、创建全局公告组件头部公告组件弹窗公告组件4、组件注册到全局5、在pages.json文件中配置 insetLoader6、H5需要额外使用render.js7、全局调用(一进入页面就获取弹…

18 OpenCV霍夫变换检测直线

文章目录 HoughLines 算子HoughLinesP 算子示例 HoughLines 算子 cv::HoughLines( InputArray src, // 输入图像&#xff0c;必须8-bit的灰度图像 OutputArray lines, // 输出的极坐标来表示直线 double rho, // 生成极坐标时候的像素扫描步长 double theta, //生成极坐标时候…

Windows中在C#中使用Dapper和Mysql.Data库连接MySQL数据库

Windows中在C#中使用Dapper和Mysql.Data库连接MySQL数据库 在Windows中使用C#连接Mysql数据库比较简单&#xff0c;可以直接使用MySql.Data库&#xff0c;目前最新版本为&#xff1a;8.3.0。 当然也可以结合MySql.Data和Dapper库一起使用&#xff0c;目前Dapper的最新版本为&a…

【黑马程序员】Python面向对象

文章目录 面向对象对象初始对象类的定义和使用语法代码示例 内置方法构造方法字符串方法比较方法__lt__方法__le__方法__eq__方法 封装私有成员使用私有成员 继承单继承多继承重写父类成员方法调用父类同名成员 类型注解变量注解对变量设置类型注解在注释中进行类型注解类型注解…

文本生成解码策略及其在transformers中的代码实现

诸神缄默不语-个人CSDN博文目录 开放式文本生成会偏好采样方法。 由于我要下班了&#xff0c;所以本文主要就写了第五节。别的内容请大家参考第六节给出的参考资料。 文章目录 1. 贪心搜索2. beam search3. top-k sampling4. top-p sampling5. 代码实践&#xff1a;transform…

解决ffmpeg播放摄像头延时的问题(项目案例使用有效)

第一1.目前使用的对接的海康威视的摄像机,并且采用的流媒体服务器NodeMediaServer 进行收数据流并发流数据。但是延时达到了20秒,所以客户看到的效果不是很乐观,没有办法,只能开始优化播放延时的问题,至于对接摄像头的方案有好几种。我这种情况是时间没有延迟只有画面是有…