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

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

✨一、前言

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

二、具体实现

1.前期准备

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

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

2.wxml代码

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

  
  <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"

你可能感兴趣的:(小程序,微信小程序,小程序)