微信小程序 瀑布流上拉加载更多

wx.wxml(页底提示)

 <block wx:if="{{dataILu}}">
    <view class="loadMore" style="text-align:center">正在加载中...</view>
  </block>
  <block wx:else>
    <view class="loadMore" style="text-align:center">没有更多数据了</view>
  </block>

wx,js  数据

 

 onLoad(options) {
    var _this = this;
      this.getdata();
  },
    /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getdata();
},

getdata(){
  var _this = this;
  //如果没有更多数据了就退出
  if ( ! this.data.dataILu ) return
  this.data.pageIndex++
  //获取数据的接口
  wx.request({
    url: 'http://www.calmpu.com/api/getFangs',
    data: {
      id: wx.getStorageSync('id'),
      page:_this.data.pageIndex
    },
    header: {
      'Authorization': wx.getStorageSync('token')
    },
    success(res) {
      console.log(res.data)
      _this.setData({
        pageSize:res.data.data.last_page,
      })
      if(_this.data.pageIndex<_this.data.pageSize)
        {
            _this.setData({
              datalist:_this.data.datalist.concat(res.data.data.data)  
            })
        }else{
          _this.setData({
             dataILu:false
          })
        }
    }
  })
},

后端代码

//控制器 
public function getFangs(Request $request)
    {
        $field = ['id','fang_name','fang_pic','fang_shi','fang_ting','fang_rent','fang_build_area'];
        $data = IndexModel::getFangs($field);
        return success("获取信息成功",$data);
    }
//模型
   public static function getFangs($field)
    {
        return self::select($field)->paginate(10);
    }