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

在这里插入图片描述

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.mzph.cn/diannao/1399.shtml

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

相关文章

android开发 多进程的基本了解

目录 如何开启多进程?理解多进程模式的运行机制 如何开启多进程? 给四大组件在androidMenifest中指定android:precess <activityandroid:name".ThreeActivity"android:exported"false"android:process"com.my.process.three.remote" />…

如何查询下载自然资源相关的法律法规

自然资源部门户网站- 政策法规库 (https://f.mnr.gov.cn/) 以查询下载“节约用水条例”为例&#xff1a;输入标题&#xff0c;点击检索&#xff0c;出现对应的检索结果&#xff1a; 打开详细&#xff0c;可以看到节约用水条例的详细内容&#xff1a; 点击文后的打印或者下载&a…

如何使用PHPStudy+Cloudreve搭建个人云盘并实现无公网IP远程访问——“cpolar内网穿透”

文章目录 1、前言2、本地网站搭建2.1 环境使用2.2 支持组件选择2.3 网页安装2.4 测试和使用2.5 问题解决 3、本地网页发布3.1 cpolar云端设置3.2 cpolar本地设置 4、公网访问测试5、结语 1、前言 自云存储概念兴起已经有段时间了&#xff0c;各互联网大厂也纷纷加入战局&#…

day48_servlet

今日内容 周一 0 复习上周 1 本周计划 2 MVC和三层架构 3 Login案例 4 请求转发 5 重定向 0 复习昨日 1 jdbc五大步骤 注册驱动(反射)获得连接获得执行sql对象执行SQL关流 2 什么是SQL注入 通过SQL关键词,在执行SQL时出现不正常的情况 3 PreparedStatement怎么使用,有什么特点 …

刷题之Leetcode19题(超级详细)

19.删除链表的倒数第N个节点 力扣题目链接(opens new window)https://leetcode.cn/problems/remove-nth-node-from-end-of-list/ 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 进阶&#xff1a;你能尝试使用一趟扫描实现吗&#x…

react09 hooks(useState)

react-09 hooks&#xff08;useState&#xff09; hooks组件&#xff08;函数组件动态化&#xff09; 其本质就是函数组件&#xff0c;引用一些hooks方法&#xff0c;用来在函数组件中进行例如状态管理&#xff0c;模拟类组件的生命周期等&#xff0c;只能运用到函数组件中 ho…

代码随想录算法训练营第三十二天|122.买卖股票的最佳时机II,55. 跳跃游戏,45.跳跃游戏II

目录 122.买卖股票的最佳时机II思路代码 55. 跳跃游戏思路代码 45.跳跃游戏II思路代码 122.买卖股票的最佳时机II 题目链接&#xff1a;122.买卖股票的最佳时机II 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;贪心算法也能解决股票问题&#xff01;LeetCode&#xff1…

项目管理-项目成本管理

目录 一、成本管理概述 二、成本估算 2.1 定义 2.2 成本估算方法 2.2.1 自顶向下的估算 2.2.1.1 估算方法 2.2.1.2 优点 2.2.1.3 缺点 2.2.2 自底向上的估算 2.2.2.1 估算方法 2.2.2.2 优点 2.2.2.3 缺点 2.2.3 差别估算法 三、成本预算 3.1 定义 3.2 成本预算的…

ccfcsp201312-2 ISBN号码

注意&#xff1a;50分 -- u10&#xff0c;最后一位为X 代码&#xff1a; #include <bits/stdc.h> using namespace std; string s; int a[12]; int main() {cin >> s;a[1] s[0] - 0;a[2] s[2] - 0;a[3] s[3] - 0;a[4] s[4] - 0;a[5] s[6] - 0;a[6] s[7] - …

Jupyter Notebook更改默认打开的浏览器和工作目录

Jupyter Notebook更改工作目录 打开cmd&#xff0c;输入&#xff1a;jupyter notebook --generate-config&#xff0c;可以得到Jupyter Notebook配置文件的路径&#xff0c;找到路径下的jupyter_notebook_config.py文件&#xff0c;用记事本或者Sublime打开文件 找到&#xff…

统一SQL-支持unpivot列转行

统一SQL介绍 https://www.light-pg.com/docs/LTSQL/current/index.html 源和目标 源数据库&#xff1a;Oracle 目标数据库&#xff1a;TDSQL-MySQL 操作目标 在Oracle中&#xff0c;可以使用unpivot将列转换成行&#xff0c;在TDSQL-MySQL中没有对应的功能&#xff0c;由…

HDMI to TYPE-C芯片|HDMI2.0转TYPE-C转接器方案|CS5802设计方案|ASL CS5802

CS5802输入端可以是1080P、4K30、4K60HZ这三种规格,输出的接口可以是TYPE-C信号接口,或者是TYPE-C信号接口,输入端HDMI由4路信号组成&#xff0c;支持1.62Gbps、2.7Gbps、5.4Gbps链路速率。内置可选SSC功能可降低EMI的干扰状况。 ASL CS5802芯片概述&#xff1a; 符合HDMI规范…

二分查找详解

二分查找是一种查找方式&#xff0c;用于在已经排好序的数组中寻找某个特定的数 我们直接来介绍二分查找的查找方法 左边界与右边界 左闭右闭&#xff1a; n为数组元素个数&#xff0c;a为目标数字 我们以左闭右闭区间为例&#xff0c;left为左边界0,right为右边界n-1&…

不同条件累加(C语言)

一、题目&#xff1b; 二、N-S流程图&#xff1b; 三、运行结果&#xff1b; 四、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int i 0;int j 0;float result1 0;float result2 0;float result…

牛客小白月赛91 ----- Bingbong的回文路径 ---- 题解

Bingbong的回文路径&#xff1a; 题目描述&#xff1a; 思路解析&#xff1a; 现在有一棵树&#xff0c;树上每个结点上都有一个小写字母&#xff0c;那么如果唯一确定了x和y两个结点&#xff0c;那么就唯一确定了一个字符串路径&#xff08;最短路径&#xff09;。 -现在给出…

CSS 画一个三角形

一、前言 在前端开发的时候&#xff0c;我们有时候会需要用到一个三角形的形状&#xff0c;比如地址选择或者播放器里面播放按钮 通常情况下&#xff0c;我们会使用图片或者svg去完成三角形效果图&#xff0c;但如果单纯使用css如何完成一个三角形呢&#xff1f; 实现过程似…

3、MATLAB中矩阵和多维矩阵介绍

文章目录 一、矩阵二、矩阵举例三、定义变量四、定义矩阵五、获取变量值 一、矩阵 MATLAB中数据的基本格式是矩阵&#xff1b; 二维矩阵是一个带有以行和列排列的元素的矩阵表&#xff1b;如果右m行、n列&#xff0c;这个矩阵的大小就是m x n&#xff1b;多维矩阵的维数大于2…

[jinja2]模板访问对象属性

甚至可以用. 访问字典 .访问一般用得是最多的

【java解决线程间变量不可见性的方案】

解决线程间变量不可见性的方案 一、 背景 所有的实例变量和类变量都存储在主内存&#xff0c;但每个线程都有自己的工作内存&#xff0c;保留了主内存的共享变量的副本&#xff0c;线程修改的是共享变量&#xff0c;但是每个线程每次只能读取工作内存里的值&#xff0c;所以会…

Elasticsearch:(二)2.安装kibana

1.环境安装介绍: 安装java环境安装Elasticsearch安装kibana安装Elasticsearch-head插件 本节文章主要讲解kibana的安装。 2.下载 下载Elasticsearch对应的版本,参考官方自身产品兼容版本:支持一览表 | Elastic 下载地址:Kibana 7.17.20 | Elastic Kibana 7.17.20 | Ela…