微信小程序 - 商城项目 - 列表懒加载

分段获取数据

数据需要进行一个分段获取，避免一次全部获取页面卡顿影响性能

json - server 支持数据接口上加上?_page=1&_limit=5，表示获取第一页数据，只获取5个数据

http://localhost:5000/goods?_page=1&_limit=5

  // 获取列表数据
  renderGoods(){
    request({
      url:`/goods?_page=${this.data.pageNumber}&_limit=5`
    },true).then(res=>{
      this.setData({
        goodlist:[...this.data.goodlist,...res.list],
        total:res.total
      })
    })
  },

上拉触底事件

需要获取更多数据，列表上拉触底

触发微信小程序的上拉触底生命周期函数 onReachBottom

  onReachBottom() {
    if(this.data.goodlist.length==this.data.total) {
      return
    }
    this.setData({
      pageNumber:this.data.pageNumber+1
    })
    this.renderGoods()
  },