微信小程序实现下滑触底加载loading更多数据，用分页的原理实现下拉触底加载效果（动画效果）

wantLG

已于 2024-07-27 09:50:09 修改

阅读量2.3k

点赞数 5

分类专栏：小程序uni-app 文章标签：小程序

于 2020-11-20 19:48:28 首次发布

本文链接：https://blog.csdn.net/weixin_45491473/article/details/109861856

版权

小程序uni-app 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文前推荐一下👉前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口：http://luckycola.com.cn/
图床：https://luckycola.com.cn/public/dist/#/imghub
多种API：https://luckycola.com.cn/public/dist/#/
ChatAI：https://luckycola.com.cn/public/dist/#/chatAi
AI思维导图神器：https://luckycola.com.cn/public/dist/#/aiQStore/aiMindPage

小程序上拉触底刷新，执行分页加载数据loading

此博客适用于用分页方法使小程序下拉时实现需要加载更多数据时使用

先看效果图:

WXML文件中

	<view class="weui-loadmore" hidden="{{!searchLoading}}">
		<view class="weui-loading"></view>
		<view class="weui-loadmore__tips">正在加载</view>
	</view>
	<view class="weui-loadmore weui-loadmore_line" hidden="{{searchLoadingComplete}}">
		<view class="weui-loadmore__tips weui-loadmore__tips_in-line">已加载全部</view>
	</view>

没有wxss文件

JS文件

现在data中定义一个控制下滑刷新的变量

data:{
  searchLoading: false, //"上拉加载"的变量，默认false，隐藏
    searchLoadingComplete: false, //“没有数据”的变量，默认false，隐藏
}

在onload中先调用一次请求数据的方法（分页形式）

/**
   * 查询所有热搜
   */
  getAllHot() {
  //从自定义的接口中请求数据，先请求两条测试
    homeApi.getAllHot(1, 2).then((res) => {
      this.setData({
        pugeFind: res.data.hotList,
      });
    });
  },

下面是自定义的接口在这里插入图片描述

现在data中定义一些需要的数据

  /**
   * 页面的初始数据
   */
  data: {
    page: 1,
    //发现
    pugeFind: null,
    //新闻个数
    searchLoading: false, //"上拉加载"的变量，默认false，隐藏
    searchLoadingComplete: false, //“没有数据”的变量，默认false，隐藏
  },

然后在上拉触底的周期函数中设置触底的逻辑


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // 触发加载中效果
    this.setData({
      searchLoading: true,
      searchLoadingComplete: true,
    });
    // 案例详情
    // 页数 +1
    this.data.page++;
    homeApi.getAllHot(this.data.page, 2).then((res) => {
      var allNews = res.data.hotList;
      //把新请求到的数据拼接到一个新数组中
      var findNews = [...this.data.pugeFind, ...allNews];
      //请求成功后关闭加载事件，并且重新赋值渲染的数据
      this.setData({
        pugeFind: findNews,
        searchLoading: false,
        searchLoadingComplete: false,
      });
    });
  },