【微信小程序】解决分页this.setData数据量太大的限制问题

news/2024/5/3 11:14:55

在这里插入图片描述

1、原始方法,每请求一页都拿到之前的数据concat一下后整体再setData

loadData() {let that = thislet data = {}data.page = this.data.pagedata.size = this.data.sizefindAll(data).then(res => {if (res.data.code === 1) {this.setData({dataList: this.data.dataList.concat(res.data.data.content)})} else {wx.showToast({title: res.data.msg,icon: 'none'})}})
}

2、改进方法,每请求一页都只setData当前页的数据

loadData() {let that = thislet data = {}data.page = this.data.pagedata.size = this.data.sizefindAll(data).then(res => {if (res.data.code === 1) {let index = this.data.page - 1this.setData({['dataList[' + index + ']']: res.data.data.content})} else {wx.showToast({title: res.data.msg,icon: 'none'})}})
}

3、结合scroll-view请求列表做分页的具体实现

模板中使用二维数组展示数据

<scroll-view scroll-y lower-threshold="100" style="height: calc(100vh - 480rpx)" bindscrolltolower="scrollToLower"><view wx:for="{{dataList}}" wx:for-item="list" wx:key="index"><view class="dataList" wx:for="{{list}}" wx:key="index"><view>{{item.name}}</view><view>{{item.phone}}</view></view></view></scroll-view>
data: {isPage:false, // 还有下一页loading: false, // 正在加载page: 1,size: 10
}loadData() {let that = thislet data = {}data.page = this.data.pagedata.size = this.data.sizefindAll(data).then(res => {if (res.data.code === 1) {let index = this.data.page - 1this.setData({['dataList[' + index + ']']: res.data.data.content,loading: false})if(this.data.page >= res.data.data.totalPages) { // 当前页大于等于数据的总页数则无下一页this.setData({isPage: false,page:1})} else { // 有下一页this.setData({isPage:true})}} else {wx.showToast({title: res.data.msg,icon: 'none'})}})
},//滑动触底 
scrollToLower: function (event) {console.log('到达底部');if (this.data.isPage && !this.data.loading) { // 有下一页并且上一页的数据处理完成则请求下一页的数据this.setData({page: this.data.page + 1,loading: true})this.loadData();}
}

http://www.mrgr.cn/p/52336682

相关文章

synchronization(同步)

并发进程之间的关系在内存中同时存在的若干个进程/线程,由操作系统的调度程序采用适当的策略将他们调度至cpu上运行,同时维护他们的状态队列。多个并发进程/线程从宏观上是同时在运行; 从微观的角度看,他们的运行过程是走走停停; 并发的进程/线程是交替执行(Interleaving…

修改中文、英文参考文献在文末列表中的顺序:EndNote

本文介绍在EndNote软件中,使得参考文献按照语种排列,中文在前、英文在后的方法~本文介绍在EndNote软件中,使得参考文献按照语种排列,中文在前、英文在后的方法。前期我们在EndNote参考文献格式Output Styles界面介绍一文中,详细介绍了文献管理软件EndNote的引用格式自定义…

网络编程ServerSocketChannel

ServerSocketChannel 1 非阻塞 vs 阻塞1.1 阻塞1.2 非阻塞1.3 多路复用 2 Selector2.1 创建2.2 绑定 Channel 事件2.3 监听 Channel 事件2.4 &#x1f4a1; select 何时不阻塞 3 处理 accept 事件&#x1f4a1; 事件发生后能否不处理 4 处理 read 事件4.1 &#x1f4a1; 为何要…

蓝桥杯2024年第十五届省赛真题-宝石组合

思路&#xff1a;参考博客&#xff0c;对Ha,Hb,Hc分别进行质因数分解会发现&#xff0c;S其实就等于Ha&#xff0c;Hb&#xff0c;Hc的最大公约数&#xff0c;不严谨推导过程如下&#xff08;字丑勿喷&#xff09;&#xff1a; 找到此规律后&#xff0c;也不能枚举Ha&#xff…

SURE:增强不确定性估计的组合拳,快加入到你的训练指南吧 | CVPR 2024

论文重新审视了深度神经网络中的不确定性估计技术,并整合了一套技术以增强其可靠性。论文的研究表明,多种技术(包括模型正则化、分类器改造和优化策略)的综合应用显着提高了图像分类任务中不确定性预测的准确性 来源:晓飞的算法工程笔记 公众号论文: SURE: SUrvey REcipes…

基于face_recognition实现的人脸识别功能

环境Python 3.11.8 dlib == 19.24.4 opencv-python == 4.9.0.80 numpy == 1.26.4 face_recognition == 1.3.0通过本地图片采集人脸编码 import os import cv2 import face_recognition encode_list = [] image_field_path = os.path.join(., images) images_file_list = os.lis…

Spring Boot 目前还是最先进的吗?

当谈到现代Java开发框架时&#xff0c;Spring Boot一直处于领先地位。它目前不仅是最先进的&#xff0c;而且在Java生态系统中拥有着巨大的影响力。 1. 什么是Spring Boot&#xff1f; Spring Boot是由Spring团队开发的开源框架&#xff0c;旨在简化基于Spring的应用程序的开…

4.10 + (double)(rand()%10)/100.0

机房是我家黑色星期四 坏消息: 没有奥赛课,所以大概率调不出来 CF1479D 好消息: 5k 回来了,调题有望 🥰 中午起床直接来的机房,有学科自习就说我不知道 结果被叫回去了 😢 而且今天班里没水了,趁着大课间跑操又去了一趟机房,赢 奥赛大会 老规矩颁奖典礼打头 不一样的…

RAG 2.0架构详解:构建端到端检索增强生成系统

关于检索增强生成(RAG)的文章已经有很多了,如果我们能创建出可训练的检索器,或者说整个RAG可以像微调大型语言模型(LLM)那样定制化的话,那肯定能够获得更好的结果。但是当前RAG的问题在于各个子模块之间并没有完全协调,就像一个缝合怪一样,虽然能够工作但各部分并不和…

东方博宜 1157. 最小数

东方博宜 1157. 最小数 今天不想写思路&#xff0c;乱糟糟的&#xff0c;能运行就拉倒了 #include <iostream> using namespace std; int main() {int n ;int a[201] ;cin >> n ;for(int i 1 ; i < n ; i){cin >> a[i] ; } int j ;j 1 ;for(int i 1…

Java对接第三方接口C#语言 请求是xml格式方式

文章目录 目录 文章目录 安装流程 小结 概要写法流程技术细节小结 概要 实现方式通过标签方式获取一个Body内标签的信息一步一步解析到需要获取到的数据信息 写法流程 技术细节 先和对面对接项目的开发拿到postman接口数据信息&#xff0c;然后再本地跑通接口&#xff0c;再进…

荣誉

荣誉 个人 学习委员 国防教育先锋队 朋辈导师 优秀团员 省级三好学生 职业技能大赛网络安全 河南省第七届御网杯信息安全大赛三等奖第二十届全国大学生信息安全对抗技术竞赛 ​ 数通 H3C认证路由交换网络工程师.pdf H3CSE-RS-IPv6.pdf 华为ICT网络赛道三等奖华为 HarmonyOS应用…

Windows10中多屏显示器型号获取并与Screen对应

需求:标识某块屏,不参与窗口快速移动 @@@codepublic class Monitor{/// <summary>/// DeviceID,如: \\.\DISPLAY17/// </summary>public String DeviceName { get; set; } /// <summary>/// 名称,如: Default_Monitor/// </summary>public…

制作适用于openstack平台的win10镜像

1. 安装准备 从MSDN下载windows 10的镜像虚拟机开启CPU虚拟化的功能。从Fedora 网站下载已签名的 VirtIO 驱动程序 ISO 。 创建15 GB 的 qcow2 镜像&#xff1a;qemu-img create -f qcow2 win10.qcow2 15G 安装必要的软件 yum install qemu-kvm qemu-img virt-manager libvir…

ubuntu20 解决网线不能联网 RTL8111/8168/8411

这种问题一般是驱动没有正确安装。 ----RTL8111/8168/8411是一块比较坑的网卡。 1、 查看网卡信息 lspci |grep Ethernet2、 对于高版本的Ubuntu&#xff0c;能直接使用命令安装驱动。下面的r8168-dkms需根据网卡信息修改&#xff0c;上面的网卡信息还有8111&#xff0c;但逐个…

【云原生】Spring Cloud微服务学习路线汇总

【云原生】Spring Cloud微服务学习路线汇总Spring Cloud是什么?简单来说Spring Cloud是一系列框架的组成集合。主要利用的我们现在主流应用的Spring Boot框架开发便利性、巧妙地简化了分布式系统基础设施的开发,如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监…

ROS笔记5--动作通讯

1、动作通讯简介 机器人是一个复杂的智能系统,并不仅仅是键盘遥控运动、识别某个目标这么简单,我们需要实现的是送餐、送货、分拣等满足具体场景需求的机器人。在这些应用功能的实现中,另外一种ROS通信机制也会被常常用到——那就是动作。 从这个名字上就可以很好理解这个概…

c# 中 dataGridView控件 显示水平滚动条

1. 最主要的在dataGridView控件属性中的ScrollBars是否设为BothBoth代表水平和垂直方向根据实际需求自动显示滚动条None 代表水平和垂直都不显示滚动条Vertical 代表只垂直显示滚动条Horizontal 代表只水平显示滚动条 2.检查表格中每个列的属性,看 Frozen 应设置为 false 如果…

Kubernetes(k8s)与docker的区别

Kubernetes(k8s)与docker的区别k8s与docker的区别Kubernetes (通常简称为"k8s") 和 Docker 是两个不同的技术,它们在容器化应用程序方面扮演着不同的角色。Docker 是一种开源的容器化技术,它允许应用程序在一个独立、可移植的容器中运行。容器化是一种将应用程序…

vue框架中的路由

vue框架中的路由 一.VueRouter的使用&#xff08;52&#xff09;二.路由模块封装三.声明式导航 - 导航链接1.router-link-active类名2.router-link-exact-active类名3.声明式导航-自定义类名 四.查询参数传参五.动态路由传参方式查询参数传参 VS 动态路由传参 六.动态路由参数的…