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

小程序上拉触底刷新，执行分页加载数据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,
      });
    });
  },

最后到这就结束了，学到了就一键三连，谢谢啦~

更多推荐：wantLG的《普歌-前端结合vue-element-admin实现简单Oauth2.0内部第三方登录》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-微信小程序实现下滑触底加载loading更多数据，用分页的原理实现下拉触底加载效果（动画效果）》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。