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

news/2024/7/20 1:44:20 标签: 微信小程序, 小程序

🤵 作者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"

http://www.niftyadmin.cn/n/5343986.html

相关文章

如何通过写计划,赢得工作掌控感?

开年工作计划&#xff0c;到底怎么写。 我们知道&#xff0c;2、3月份是很多公司开始写年度计划、季度计划的时候&#xff0c;没准此时此刻&#xff0c;你正在为怎么写好一份工作计划犯愁。罗砚老师也跟我说&#xff0c;她最近收到了同学们的提问&#xff0c;都是关于怎么写工…

Imagenet-A,Imagenet-C和ImageNet-O

Imagenet-A ImageNet-A 数据集包含由 ResNet 模型错误分类的真实世界、未经修改和自然发生的示例。该数据集包含 7,500 张经过对抗性过滤的图像&#xff0c;很容易导致机器学习模型的性能显著下降。 Imagenet-C 对ImageNet 1K添加了一些常见的图像损坏&#xff08;如模糊和噪…

虚拟机体验Mycat

Mycat 安装目录 /opt/mycat导入OVA 安装Oracle VM VirtualBox 启动Oracle VM VirtualBox File&#xff08;管理&#xff09; -> Import Appliances&#xff08;导入虚拟电脑&#xff09; 选择CentOS 7.ova 一路Next 体验Mycat 启动虚拟机 登录虚拟机 root/123456 启…

LeetCode 93.复原IP地址 Python题解

复原IP地址 # 复原IP地址 """ 有效IP地址正好由四个整数&#xff08;每个整数位于0到255之间组成&#xff0c;且不能含有前导0&#xff09;&#xff0c;整数之间用.分隔。 例如:"0.1.2.201"和"192.168.1.1"是有效IP地址&#xff0c; 但是&…

uni-app使用HBuilderX打包Web项目

非常简单&#xff0c;就是容易忘记 一、找到manifest.json配置Web配置 二、源码视图配置 "h5" : {"template" : "","domain" : "xxx.xx.xx.xxx","publicPath" : "./","devServer" : {&quo…

MATLAB初始化种群-随机和一定的实数序列

在智能算法的编码场景中,很多时候是需要用求和为一定的编码的, 比如分配问题, 配送问题等, 下面给出具体程序代码: clc;close all;clear all;warning off;%清除变量 rand(seed, 100); randn(seed, 100); format long g; N5; % 设定优化问题维数 lb0*ones(1,N);% 自变量上限 ub…

k8s---HPA 命名空间资源限制

目录 HPA相关知识 HPA&#xff08;Horizontal Pod Autoscaling&#xff09;Pod 水平自动伸缩&#xff0c;Kubernetes 有一个 HPA 的资源&#xff0c;HPA 可以根据 CPU 利用率自动伸缩一个 Replication Controller、 Deployment 或者Replica Set 中的 Pod 数量。 &#xff08;1…

Dart/Flutter工具模块:the_utils

Flutter笔记 Dart/Flutter工具模块&#xff1a;the_utils 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/detail…