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

发布时间:2024年01月24日

?? 作者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"
文章来源:https://blog.csdn.net/qq_23073811/article/details/132837469
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。