微信小程序实现页面下拉加载（laravel)

我们在小程序页面加载时，为了防止一次请求数据量过大，我们通常会考虑使用分页加载我们的数据，那么小程序我们如何实现这一点呢？

wxml页面

<block wx:for="{{concert}}" wx:key="unique">
<view class="concert" bindtap="detail" data-id="{{item.id}}">
<view class="cover">
<image src="{{item.cover}}">image>
view>
<view class="concent">
<view class="con">
<view class="title">{{item.title}}view>
<view class="desc">
<view>{{item.start_time}}至{{item.end_time}}view>
<view>{{item.address.name}}view>
view>
<view class="price">￥{{item.price}}view>
view>
view>
view>
block>

<view wx:if="{{loading}}">
  <l-loadmore show="{{true}}" type="end" line="{{true}}">
l-loadmore>
view>

js方法

Page({
  /**
   * 页面的初始数据
   */
  data: {
    loading:"",
    concert:"",
    page:'',
    last_page:"",
    token:wx.getStorageSync('token')
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.getConcertData()
  },
  getConcertData(){
    wx.request({
      url: '',
      success:res=>{
        // console.log(res.data.data.data)
        this.setData({
          concert:res.data.data.data,
          page:res.data.data.current_page,
          last_page:res.data.data.last_page
        })
      }
    })
  },
  detail(e){
    let id=e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '/pages/detail/detail?id='+id,
    })
  },
  onReachBottom: function () {
    let page=this.data.page+1;
    let last_page=this.data.last_page;
    if (page>last_page) {
      let page=last_page
    }
    wx.request({
      url: '‘,
      success:res=>{
        if(res.data.data.data==''){
          this.setData({
            loading:true
          })
        }else{
          this.setData({
            concert:this.data.concert.concat(res.data.data.data),
            page:res.data.data.current_page
          })
        }
      }
    })
  },
})

json文件

{
  "usingComponents": {
    "l-loadmore":"/miniprogram_npm/lin-ui/loadmore"
  }
}

wxss文件

.concert{
  width:100%;
  height:380rpx;
  display: flex;
  border: 1px solid #ccc;
}
.cover{
  width: 36%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: red 1px solid; */
}
.cover image{
  width: 90%;
  height: 90%;
}
.concent{
  width: 62%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: blue 1px solid; */
}
.con{
  width: 94%;
  height: 90%;
  /* border: blueviolet 1px solid; */
}
.title{
  width: 100;
  height: 35%;
  /* border: springgreen 1px solid; */
}
.desc{
  width: 100;
  height: 45%;
  font-size: 26rpx;
  color:#797979;
}
.price{
  width: 100;
  height: 20%;
  display: flex;
  align-items: center;
  /* border: solid 1px blue; */
}