微信小程序上拉加载 加载更多数据 触底加载 点击加载更多数据

开发需求

进入页面，加载初始数据，当向上拖动页面至底部，自动加载新的数据，即上拉加载更多数据。

演示

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
          })
        }
      }
    })
  }
})

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;
}

服务端返回的数据格式

[
    {"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