微信小程序上拉加載 加載更多數據 觸底加載 點擊加載更多數據

開發需求

進入頁面，加載初始數據，當向上拖動頁面至底部，自動加載新的數據，即上拉加載更多數據。

演示

index.wxml

<!-- 數據列表 -->
<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>
  <view class='title'>{{item.title}}</view>
  <view class='title'>資源ID:{{item.id}}</view>
  <image src="{{item.coverimg}}" class='cover'></image>
</view>

<!-- 若是還有更多數據能夠加載，則顯示玩命加載中 -->
<view class="load-more-wrap">
<block wx:if="{{hasMore}}">
  <view class="load-content">
    <text class="weui-loading"/><text class="loading-text">玩命加載中</text>
  </view>
</block>
<!-- 不然顯示沒有更多內容了 -->
<block wx:else>
  <view class="load-content">
    <text>沒有更多內容了</text>
  </view>
</block>
</view>

index.js

Page({
  data: {
    listdata:[],  //數據
    moredata: '',
    p:0, //當前分頁；默認第一頁
    hasMore:true //提示
  },

  //加載初始數據
  onLoad: function (options) {
    var that = this;

  //初始頁面
  var p = that.data.p;
    this.loadmore();
  },

  //觸底事件
  onReachBottom:function(){
    var that = this;
    //檢查是否還有數據能夠加載
    var moredata = that.data.moredata;
    //若是還有，則繼續加載
    if (moredata.more != 0) {
      this.loadmore();
      //若是沒有了，則中止加載，顯示沒有更多內容了
    }else{
      that.setData({
        "hasMore": false
      })
    }
  },

  //發起請求
  loadmore:function(){

    //加載提示
    wx.showLoading({
      title: '加載中',
    })

    var that = this;
    //頁面累加
    var p = ++that.data.p;

    //請求服務器
    wx.request({
      url: '你的服務器/server.php?page=' + p,
      data: {
        "json": JSON.stringify({
          "p": p
        })
      },

      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },

      //請求成功，回調函數
      success:function(res){
        
        //隱藏加載提示
        wx.hideLoading();

        //判斷市局是否爲空
        if (res.data != 0) {
          that.setData({
            //把新加載的數據追加到原有的數組
            "listdata": that.data.listdata.concat(res.data), //加載數據
            "moredata": res.data,
            "p":p
          })
        } else {
          that.setData({
            "hasMore":false
          })
        }
      }
    })
  }
})

說明
一、url修改成你的服務端連接，格式是

http:域名/目錄/?page=頁碼

例如：

http://www.baidu.com/api/data.php?page=1

頁碼是可變的，因此聲明一個變量p，因此就是

`url: 'http://www.baidu.com/api/data.php?page' + p,`

index.wxss

.listitem{
  width: 90%;
  height: 155px;
  background: rgba(0, 0, 0, 0.2);
  margin:10px auto;
  text-align: center;
  position: relative;
  color:#fff;
}

.listitem .cover{
  width:100%;
  height:155px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

.load-more-wrap .load-content{
  text-align: center;
  margin:30px auto 30px;
  color:#ccc;
  font-size: 15px;
}

服務端返回的數據格式

返回json數組的形式，例如

[
    {"id":"1","title":"標題1","coverimg":"url1"},
    {"id":"2","title":"標題2","coverimg":"url2"},
    {"id":"3","title":"標題3","coverimg":"url3"},
    {"id":"4","title":"標題4","coverimg":"url4"},
    {"id":"5","title":"標題5","coverimg":"url5"}
]

做者

Author:TANKING
Date:2020-04-20
Web:www.likeyunba.com
WeChat:face6009