微信小程序分页加载功能,结合后端实现上拉底部加载下一页数据,数据加载中和暂无数据提示

🤵 作者coderYYY
🧑 个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享🍀欢迎和我一起交流!🚀(评论和私信一般会回!!)
👉 个人专栏推荐:《前端项目教程以及代码》

✨一、前言

项目开发中,如果请求后端数据过多,我们一般会进行分页处理,而在移动端,我们一般是通过“上拉触底”这个动作加载下一页,如果加载最后一页就进行提示。

🚩二、具体实现

🎉1.前期准备

后端需要一个分页的加载数据接口,由前端传页码、条数

 {PageIndex: 1, //页码PageSize: 20 //每页大小}

🎄 2.wxml代码

页面显示分几种情况:数据已部分加载、无数据、加载中、最后一页

  <!-- 渲染数据列表,样式自己写,我这里借助了vant宫格组件--><view class="list" wx:if="{{dataList.length>0}}"><van-grid column-num="3"><van-grid-item use-slot wx:for="{{ dataList}}" wx:key="index"><view class="flex items-center"><view class="text-container">{{item.Goods_Name}}</view></view></van-grid-item></van-grid></view><view wx:else><van-empty image="search" description="暂无数据" /></view><!-- 加载提示 --><view wx:if="{{loading}}" class="tips">正在加载...</view><!-- 没有更多数据的提示 --><view wx:if="{{!loading&&!hasMoreData}}" class="tips">- 暂无更多数据 -</view>

3.js代码

  data: {// 查询参数PageIndex: 1, //页码PageSize: 20, //每页大小loading: false,// 是否加载中hasMoreData: false,// 是否还有数据dataList: [],},onLoad() {this.getList()},// 请求数据getList() {// console.log(e.detail);wx.showLoading({title: '加载中',})dataGetPage({ // 后端接口,已做了封装,封装方法请看我之前发过的文章PageIndex: this.data.PageIndex, //页码PageSize: this.data.PageSize //每页大小}).then(res => {if (res.Data) {//  请求成功,将获取的数据拼接到原来的数据列表中const newDataList = this.data.dataList.concat(res.Data);//  更新当前页数和数据列表this.setData({PageIndex: this.data.PageIndex + 1,dataList: newDataList,});} else {this.setData({hasMoreData: false})if (this.data.dataList.length > 0) {} else {this.setData({dataList: [],})}}this.setData({loading: false // 加载完成,隐藏加载提示});setTimeout(() => {wx.hideLoading()}, 500);})},// 触底onReachBottom: function () {// 调用加载下一页的方法this.loadNextPage();},// 在页面或组件中定义加载下一页数据的方法loadNextPage: function () {// 如果正在加载中,避免重复加载if (this.data.loading) {return;}// 开始加载,可以显示加载提示,避免用户重复触发加载this.setData({loading: true});// 2. 发送请求获取下一页数据this.getList();},

🔑三、总结

原理其实就是检测触底,就把页码+1,然后对数据进行拼接,以上代码需根据实际应用进行修改。欢迎评论交流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645643.shtml

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

相关文章

【服务器Midjourney】Midjourney网站0基础搭建

目录 🌺【前言】 🌺【准备】 🌺【宝塔搭建MJ】 🌼1. 给服务器添加端口 🌼2. 使用Xshell连接服务器 🌼3. 安装docker 🌼4. 安装Midjourney程序 🌼5. 绑定域名+申请SSL证书 🌼6. 更新网站

深入理解Flutter中的GlobalKey与LocalKey(ValueKey、ObjectKey、UniqueKey)及其使用方法

在Flutter中&#xff0c;Key是一个非常重要的概念&#xff0c;它用于标识和管理Widget。GlobalKey和LocalKey是Key的两个主要子类&#xff0c;而ValueKey、ObjectKey和UniqueKey则是LocalKey的具体实现。在本文中&#xff0c;我们将深入介绍这些关键概念以及它们在Flutter中的使…

XR虚拟拍摄技术:开启短剧与微剧的全新篇章

随着科技的快速发展&#xff0c;XR虚拟拍摄技术已经成为短剧与微剧制作的重要工具。这种技术为影视制作带来了巨大的变革&#xff0c;为观众带来了更加丰富、逼真的视听体验。 XR虚拟拍摄技术通过构建虚拟场景&#xff0c;使得制作人员能够更加自由地发挥创意和想象力。这种技术…

android:excludeFromRecents

android:excludeFromRecents 基础从根上影响 TaskexcludeFromRecents 属性可能会影响系统 基础 android:excludeFromRecents是一种在Android应用程序清单文件&#xff08;AndroidManifest.xml&#xff09;中使用的属性&#xff0c;用于指定一个Activity是否应该在最近任务列表…

两数之和[中等]

一、题目 给你一个下标从1开始的整数数组numbers&#xff0c;该数组已按非递减顺序排列&#xff0c;请你从数组中找出满足相加之和等于目标数target的两个数。如果设这两个数分别是numbers[index1]和numbers[index2]&#xff0c;则1 < index1 < index2 < numbers.len…

MySQL修炼手册17:高级查询优化:深入理解执行计划

目录 写在开头1 执行计划的基本概念1.1 SQL查询解析1.1.1 语法分析1.1.2 语义分析1.1.3 内部数据结构的生成1.2 优化执行计划1.2.1 统计信息的利用1.2.2 索引选择1.2.3 连接算法1.2.4 子查询优化1.3 执行计划的评估1.3.1 统计信息的利用1.3.2 索引选择1.3.3 连接算法1.3.4 子查…

关于视觉3d目标检测学习像素深度的一点理解

在真实世界的一个物体&#xff0c;可以通过相机矩阵将其投影到像素坐标系上 但是&#xff0c;在像素坐标系上的像素&#xff0c;由于相机的原理&#xff0c;导致它的深度信息已经没有了&#xff0c;所以原理上是没法得到其真实深度的(即3d位置) 那么现在的深度学习方法又为什…

【AI】深度学习与图像描述生成——看图说话(1)

还记得我闲来无事&#xff0c;用大模型来“洗图”吗&#xff0c;就是想抄袭别人的图&#xff0c;但是又要装作原创的样子。因为洗稿大家都熟悉&#xff0c;洗图其实也是一样的。 【AIGC】今天想用AI“洗个图”&#xff0c;失败了&#xff0c;进来看我怎么做的-CSDN博客 【AIG…

哈夫曼树(Huffman)

哈夫曼树 Huffman 编码问题 问题引入 什么是编码&#xff1f; 简单说就是建立【字符】到【数字】的对应关系&#xff0c;如下面大家熟知的 ASC II 编码表&#xff0c;例如&#xff0c;可以查表得知字符【a】对应的数字是十六进制数【0x61】 \000102030405060708090a0b0c0d…

php下curl发送cookie

目录 一&#xff1a;使用 CURLOPT_COOKIE 选项 二&#xff1a;CURLOPT_COOKIEFILE 三&#xff1a;CURLOPT_HTTPHEADER php curl发送cookie的几种方式,下面来介绍下 一&#xff1a;使用 CURLOPT_COOKIE 选项 通过设置 CURLOPT_COOKIE 选项&#xff0c;你可以将 cookie 字符…

用ChatGPT创作留学文书三阶玩法详解!

最近人工智能聊天工具Chagpt火爆全网&#xff0c;从闲聊到编程&#xff0c;文学到菜谱&#xff0c;似乎以一种无所不能的姿态推翻了早期“人工智障”的屈辱招牌&#xff0c;正逐步进入并改变我们生产生活方式。作为文字处理大师&#xff0c;如果让人工智能来执笔大学申请文书会…

Linux 下查看端口以及释放端口

目录 一、查看端口是否被占用 1、使用 netstat 命令 2、使用 lsof 命令 二、释放端口 1、使用kill命令 2、使用 fuser 命令 三、netstat 四、lsof 五、fuser 一、查看端口是否被占用 在 Linux 系统上&#xff0c;你可以使用 netstat 或 lsof 命令来查看端口是否被占用。…

串口WiFi模块简介、工作原理、工作方式等8大知识点

WiFi模块又名串口WiFi模块&#xff0c;属于物联网传输层&#xff0c;功能是将串口或TTL电平转为符合WiFi无线网络通信标准的嵌入式模块&#xff0c;内置无线网络协议IEEE802.11b.g.n协议栈以及TCP/IP协议栈。串口WIFI模块&#xff0c;体积小&#xff0c;功耗低&#xff0c;采用…

springboot124中药实验管理系统设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的中药实验管理系统设计与实现 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章…

CentOS 安装 Ruby

1.下载 Ruby3.3 并安装 依次执行 wget https://cache.ruby-lang.org/pub/ruby/3.3/ruby-3.3.0.tar.gz tar -zxvf ruby-3.3.0.tar.gz cd ruby-3.3.0 ./configure make make install 2.查看版本 ruby -v

深入了解Spring事件机制的作用与应用场景

Spring的事件机制为应用程序提供了一种灵活且解耦的方式来处理事件&#xff0c;它基于观察者模式构建&#xff0c;使得不同组件之间能够更加独立地工作。本文将深入探讨Spring事件机制的作用以及在实际应用中的使用场景。 作用&#xff1a; 解耦组件&#xff1a; 通过事件机制…

住宅IP VPS的應用指南

什麼是住宅IP VPS&#xff1f; 首先&#xff0c;我們來解釋一下什麼是住宅IP VPS。VPS是Virtual Private Server的縮寫&#xff0c;中文名為虛擬專用伺服器。它是一種虛擬化技術&#xff0c;可以將一臺物理伺服器分割為多個虛擬伺服器&#xff0c;每個虛擬伺服器都有自己獨立的…

【算法Hot100系列】合并区间

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

跨界做电商:百度、抖音、小红书异途同归

早些年&#xff0c;国内电商市场一直被淘宝、京东牢牢把持&#xff0c;其他电商平台只能跟在后面分一点羹。后来&#xff0c;随着拼多多崛起&#xff0c;电商格局开始生变。尤其是近两年&#xff0c;抖音、小红书、百度等玩家纷纷入局&#xff0c;更是让刚刚平静的电商市场又迎…

git tag的用法详解

目录 一、tag标识一个commit 二、查看tag 三、对分支打tag 四、删除tag 五、根据某个tag来clone 一、tag标识一个commit tag是用于去标记一个特定的commit。通常&#xff0c;在进行编译部署之前&#xff0c;我们需要对某一个即将release的版本进行tag&#xff0c;例如tag为…