寫了一個小程式載入更多的模板，可以是點選事件，也可以是下拉到螢幕底部事件，自己設定。

因為是偽資料，所以有點不一樣

自己也可以想想怎麼實現，

.body{
  width: 100%;
  min-height: 100vh;
  background-color: #4C5268;
}
.center{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 15rpx 0 0 0;
}

.listcss{
  width: 80%;
  height: 60rpx;
  background-color: yellowgreen;
  border-radius: 25rpx;
  margin: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
 

<view class='body'>
  <view class='center'>
    
    <view class='listcss' wx:for="{{list}}">{{item.name}}</view>
    
  
  </view>

  <button wx:if="{{showlod}}" bindtap='{{islist==true ? "lod":""}}'>載入更多</button>
</view>

// pages/loding/loding.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    list:[],
    pages:0,
    pagee:2,
    page:1,
    showlod:true,
    islist:true,
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    this.getlist();

  },
  /**
   *  page就是向後傳的頁面，
   *  如果返回的資料為空，那麼可以移除事件
   */
  getlist:function(e){
    let that = this,
    pages = that.data.pages,
    pagee = that.data.pagee,
    page = parseInt(that.data.page),
    plist = [],
    list = that.data.list;
    switch(page){
      case 1:
        plist = req.p1()        
        console.log(plist);
        break;
      case 2:
        plist = req.p2()
        console.log(plist);
        break;
      case 3:
        plist = req.p3()
        console.log(plist);
        break; 
      default:
        console.log("沒有資料");
        wx.showToast({
          title: '沒有資料',
          icon: "none",
          duration:1000
        })
        that.setData({
          showlod: false,//用於是否顯示
          islist:false, //用於移除事件
        })
        break;  
    }
    for(let i = 0; i < plist.length;i++){
      list.push(plist[i]);
    }

    that.setData({
      list:list,
    })
 
  },
  lod:function(e){
    let that = this,
    page = that.data.page,
    pagee = that.data.pagee;
    page++;
    that.setData({
      page:page
    })
    that.getlist();
  },
  getpagelist:function(e){
    
   

  },
  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})


const req = {
  p1: function () {
    let list = [
      {name: "張三",},
      {name: "李四",},
      {name: "王五"}
      ]
    return list;
  },
  p2: function () {
    let list = [
      {name: "歐陽翠花",},
      {name: "軒轅建國",},
      {name: "諸葛狗蛋"},
    ]
    return list;
  },
  p3: function () {
    let list = [
      {name: "趙一鼠",},
      {name: "孫二牛",},
      {name: "錢三虎"}
    ]
    return list;
  },

}
 

如果是點選事件，就用wx:if="{{showlod}}"

如果是拉至底部事件，就用bindtap='{{islist==true ? "lod":""}}'

邏輯就是這個邏輯，可以整合到自己的專案中。

pages:0,pagee:2,是測試資料，沒啥關係。