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…

数据集成平台选型建议

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

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

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

腾讯云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…

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

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

vue 引用百度地图

address.vue <template><div><!-- 地图 --><el-drawer:visible.sync"type1"direction"rtl"size"50%"append-to-bodyclass"map-drawer":before-close"beforeClose"><div style"width: 100%…

CSS:过渡动画 (Transition)与关键帧动画(Keyfram)

一、过渡动画 (Transition) 1.简单介绍 Transition能为样式的变化提供过渡效果&#xff0c;例如在下面的代码中&#xff1a; .main {width: 300px;height: 100px;background-color: #d26f6f;}.main:hover {width: 300px;height: 200px;background-color: #5e3e3e;transition:…

语义分割前言

1.常见数据集 1.1PASCAL VOC 其标注图片为单通道图像&#xff0c;其0~255像素值为其取值范围&#xff0c;背景为0&#xff0c;目标区域内根据目标的类别索引信息进行填充。 1.2MS COCO 其标注图像的标注文件为坐标信息。 官网有给出一个关于标注文件的格式说明&#xff0…

数字信封

一、概念 数字信封是将对称密钥通过非对称加密&#xff08;即&#xff1a;有公钥和私钥两个&#xff09;的结果分发对称密钥的方法。数字信封是实现信息保密性验证的技术。 二、过程描述 在数字信封中&#xff0c;信息发送方采用对称密钥来加密信息内容&#xff0c;然后将此…