我們在小程式頁面載入時，為了防止一次請求資料量過大，我們通常會考慮使用分頁載入我們的資料，那麼小程式我們如何實現這一點呢？

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