小程序分頁加載

一、app.json啓用enablePullDownRefresh

在window配置項裏面添加"enablePullDownRefresh": true

二、頁面.wxml

<view class='panel base-padding base-margin-bottom cate-data'>
  <view class='panel-heading'>
    <view class='panel-title font-lv1 strong'>唐詩     
    </view>
  </view>
  <view class='panel-body'>  
    <block wx:for="{{contentlist}}">
      <view class='row'> 
          <navigator url='/pages/intro/intro' class='ellipsis-1row font-lv2'>{{item.title}}</navigator>      
          <view class='text-muted info'>{{item.authors}}</view>  
          <view class='text-muted ellipsis-2row desc'>{{item.content}}
          </view>        
      </view>
    </block>
  </view>
</view>

三、後臺方法返回

因爲是測試，找了網上一個免費https接口：https://api.apiopen.top/getTangPoetry?page=1&;count=5

返回以下：
{"code":200,"message":"成功!","result":[{"title":"帝京篇十首 一","content":"秦川雄帝宅，函谷壯皇居。|綺殿千尋起，離宮百雉餘。|連甍遙接漢，飛觀迥凌虛。|雲日隱層闕，風煙出綺疏。","authors":"太宗皇帝"},{"title":"帝京篇十首 二","content":"巖廊罷機務，崇文聊駐輦。|玉匣啓龍圖，金繩披鳳篆。|韋編斷仍續，縹帙舒還卷。|對此乃淹留，欹案觀墳典。","authors":"太宗皇帝"},{"title":"帝京篇十首 三","content":"移步出詞林，停輿欣武宴。|雕弓寫明月，駿馬疑流電。|驚雁落虛弦，啼猿悲急箭。|閱賞誠多美，於茲乃忘倦。","authors":"太宗皇帝"},{"title":"帝京篇十首 四","content":"鳴笳臨樂館，眺聽歡芳節。|急管韻朱弦，清歌凝白雪。|綵鳳肅來儀，玄鶴紛成列。|去茲鄭衛聲，雅音方可悅。","authors":"太宗皇帝"},{"title":"帝京篇十首 五","content":"芳辰追逸趣，禁苑信多奇。|橋形通漢上，峯勢接雲危。|煙霞交隱映，花鳥自參差。|何如肆轍跡？萬里賞瑤池。","authors":"太宗皇帝"}]}

四、頁面.js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    page: 1,
    pageSize: 5,
    hasMoreData: true,
    contentlist: []
  },

  getInfo: function () {
    var that = this;
    wx.request({
      url: 'https://api.apiopen.top/getTangPoetry',
      data: { page: that.data.page, count: that.data.pageSize },
      success: function (res) {
        console.log(res);// 服務器回包信息
        var contentlistTem = that.data.contentlist;       
        if (res.data.code == 200) {
          if (that.data.page == 1) {
            contentlistTem = []
          }
          var contentlist = res.data.result;
          if (contentlist.length < that.data.pageSize) {
            that.setData({
              contentlist: contentlistTem.concat(contentlist),
              hasMoreData: false
            })
          } else {
            that.setData({
              contentlist: contentlistTem.concat(contentlist),
              hasMoreData: true,
              page: that.data.page + 1
            })
          }        
        }else{
          wx.showToast({
            title: '出現異常'
          })
        }
      }

    })
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    that.getInfo();
  },

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

  },

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

  },

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

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
    this.data.page = 1;
    this.getInfo();
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    if (this.data.hasMoreData) {
      this.getInfo();
    } else {
      wx.showToast({
        title: '沒有更多數據',
      })
    }
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

界面效果以下：

 

備註：
分頁代碼主要參考這篇文章https://blog.csdn.net/xiehuimx/article/details/74938034