網上看了好多，我也參考了好多，不過總結了大家的經驗還是做出來了，前提是你有了小程式的基礎，廢話不多說。我這裡是tp5+小程式的，先上預覽圖，因為是PC端測試，拍不成高清圖，講究看一下：

前端wxml程式碼：

<view class="page-body">
    <navigator url='../info/info?id={{item.id}}' wx:for="{{list}}" wx:key="{{list}}">
      <view class='newstype-item'>
        <image src='{{item.litpic}}' class='pic' mode='aspectFill'></image>
        <view class='newstype-item-right'>
          <text class='newstype-item-maintext'>{{item.title}}</text>
          <view class='newstype-item-bottom'>
            <text class='newstype-item-smalltext'>{{item.time}}</text>
            <view class='newstype-item-bottom-right'>
              <image src="/images/icon_look.png" style="width:34rpx;height:34rpx"></image>
              <view class='newstype-item-smalltext' style="margin-left:10rpx;  font-size: 20rpx; margin-bottom:1rpx">{{item.click}}</view>
            </view>
          </view>
        </view>
      </view>
    </navigator>
  <view class="weui-loadmore" hidden="{{!hasMoreData}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在載入</view>
  </view>
  <view class='data-bottom' hidden='{{!bottomTitle}}'>{{title}}</view>
</view>
 

js程式碼部分：

var app = getApp();
var url = app.d.ceshiUrl + 'tuijian';
var page = 1;
var page_size = 6;
//獲取資料集
var getData = function(that) {
  that.setData({
    hasMoreData: false
  });
  wx.request({
    url: url,
    method: 'post',
    data: {
      page: page,
      page_size: page_size
    },
    header: {
      'Content-Type': 'application/json'
    },
    success: function(res) {
      if (res.data.status === 0) {
        wx.showToast({
          title: '沒有更多資料了',
          icon: 'success'
        });
        that.setData({
          hasMoreData: false
        });
      } else {
        console.log('下拉滑到這了');
        that.setData({
          list: that.data.list.concat(res.data.list),
          hasMoreData: true
        });
      }
    },
    fail: function() {
       wx.showToast({
         title: '網路錯誤',
         duration: 2000
       })
    },
    complete: function() {
      setTimeout(function() {
        //隱藏導航欄載入
        wx.hideNavigationBarLoading();
        //停止下拉動作
        wx.stopPullDownRefresh();
      }, 1500);
    }
  });
}

Page({
  data: {
    list: [],
    hasMoreData: true,
    bottomTitle: false
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function() {
    var that = this;
    getData(that);
  },
  /**
   * 頁面上拉載入更多
   */
  onReachBottom: function() {
    var that = this;
    //如果是上拉，那麼page必須是+1
    ++page;
    if (that.data.hasMoreData) {
      //wx.showLoading({
      //title: '拼命載入中...',
      //})
      setTimeout(function() {
        getData(that);
        wx.hideLoading()
      }, 1000)
    } else {
      //wx.showToast({
      //title: '我是有底線的',
      //icon: 'none'
      //})
      that.setData({
        bottomTitle: true,
        title: '-- 我是有底線的 --'
      })
    }
  },
  /**
   * 頁面下拉重新整理
   */
  onPullDownRefresh: function() {
    wx.showNavigationBarLoading();
    page = 1;   //重新整理後從第一頁開始
    this.setData({
      list: [],
      hasMoreData: true,
      bottomTitle: false
    })
    getData(this);
    console.log('下拉重新整理了');
  }
})
 

wxcss部分：

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}
.page-body{
  display: flex;
  flex: 1;
  flex-direction: column;
  background: #fff;
}
.newstype-list{
  display: flex;
  flex-direction: column;
}
.newstype-item{
  display: flex;
  flex-direction: row;
  margin-top: 2rpx;
  width: 750rpx;
  height: 194rpx;
  justify-content: flex-start;
  border-bottom: 1px solid #d8d8d8;
}
.newstype-item .pic{
  width: 220rpx;
  height: 160rpx;
  margin:17rpx 0 0 20rpx;
}
.newstype-item-right{
  margin-top: 17rpx;
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  width: 460rpx;
  height: 160rpx;
  justify-content: space-between;
}
.newstype-item-maintext{font-size: 28rpx;}
.newstype-item-bottom{
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.newstype-item-bottom-right{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.newstype-item-smalltext{
  display: flex;
  color: #999;
  font-size: 25rpx;
}

.data-bottom {  
  height: 70rpx;  
  line-height: 70rpx;  
  background-color: #eee;  
  text-align: center;  
  font-size: 26rpx; 
  color: #ccc; 
  margin-top: 20rpx;
} 
 

至於後端API的話，如果你懂tp5程式的話，就可以自己搞了，我就不多說了，轉載請註明作者，謝謝！