微信小程序 下拉刷新 上滑加载更多

index.wxss

/**
 * 数据源来自于rap2 mock数据，调用url: http://rap2.taobao.org:38080/app/mock/262524/get/article/list
 */

Page({
  data: {
    list: [], // 列表数据
    pages: 1, // 当前页数
    pageSize: 20, // 每页数据的个数
    isLoading: false, // 正在加载中...，默认 false，隐藏
    isLoadingMore: false, //没有更多内容了，默认 false，隐藏
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.loadData();
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    wx.showLoading({
      title: "努力加载中",
    });

    this.setData({
      pages: 1,
      list: [],
      isLoading: false,
      isLoadingMore: false,
    });

    this.loadData();
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.isLoading && !this.data.isLoadingMore) {
      this.setData({
        pages: t.data.pages + 1, //每次触发上拉事件，把当前页数 pages+1
      });

      this.loadData();
    }
  },
  /**
   * 请求数据封装
   */
  loadData: function () {
    let t = this;
    let pages = t.data.pages,
      pageSize = t.data.pageSize;

    wx.request({
      url: "http://rap2.taobao.org:38080/app/mock/262524/get/article/list",
      data: {
        pages: pages,
        pageSize: pageSize,
      },
      success: function (res) {
        let resData = res.data.data; // 返回的数据
        let resNum = resData.length; // 返回的数据列表个数
        let list = t.data.list.concat(resData); // 合并数组

        // 如果返回的数据列表个数小于每页数据的个数
        if (resNum < t.data.pageSize) {
          t.setData({
            isLoadingMore: true,
            isLoading: false,
            list: list,
          });
        } else {
          t.setData({
            isLoadingMore: false,
            isLoading: true,
            list: list,
          });
        }

        // 停止加载中动画
        wx.hideLoading();
        // 停止下拉刷新
        wx.stopPullDownRefresh();
      },
    });
  },
});

index.wxml

<view class="article">
  <view class="article_box">
    <view class="list" wx:for="{{list}}" wx:key="item.id">
      <view class="img">
        <image src="{{item.image}}"></image>
      </view>
      <view class="text">
        <view class="title">
          {{item.title}}
        </view>
        <text class="author">{{item.author}}</text>
        <view class="desc">{{item.desc}}</view>
      </view>
    </view>
  </view>

  <view hidden="{{!isLoading}}" class="loadmore loading">正在加载中...</view>
  <view hidden="{{!isLoadingMore}}" class="loadmore">没有更多内容了</view>
</view>

index.wxss

page {
  background-color: #f1f1f1;
}

.article {
  padding-top: 20rpx;
}

.article .article_box{
  padding: 0 20rpx;
}

.article_box .list {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  padding: 10rpx;
}

.article_box .list:last-child {
  margin-bottom: 0;
}

.article_box .list .img {
  width: 100%;
  height: 360rpx;
  margin-bottom: 10rpx;
}

.article_box .list .img image {
  width: 100%;
  height: 100%;
}

.article_box .list .text .title {
  color: #555;
  font-size: 36rpx;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article_box .list .text .author {
  color: #888;
  font-size: 24rpx;
}

.article_box .list .text .desc {
  color: #555;
  font-size: 32rpx;
  line-height: 25px;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 加载中动画 */
.loadmore {
  color: #888;
  font-size: 30rpx;
  line-height: 100rpx;
  text-align: center;
}
 
.loadmore.loading::before {
  content: '';
  width: 40rpx;
  height: 40rpx;
  margin-top: -10rpx;
  margin-right: 10rpx;
  display: inline-block;
  vertical-align: middle;
  animation: loading 1s steps(12) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%
}
 
@keyframes loading {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(-360deg)
  }
}

具体根据自己的接口逻辑去修改

微信开发者工具：列表demo代码片段