TP6+小程序分页加载数据

最新推荐文章于 2023-01-13 15:20:17 发布

大恒大

最新推荐文章于 2023-01-13 15:20:17 发布

阅读量276

点赞数

分类专栏：前端文章标签：小程序 javascript 前端

本文链接：https://blog.youkuaiyun.com/kindmb/article/details/127969731

版权

前端专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一个基于PHP的服务端分页实现方法，通过使用数据库查询来获取特定类型的数据，并按ID降序排列。同时，详细展示了如何在小程序端进行数据加载及上拉加载更多的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

服务端

tp的分页设计很优秀

//php:
 public function getdata(Request $request)
    {
        $key = $request->param('key'); 
        $data = Db::table('datatab')->where('type', $key)->order('id' ,'desc')->paginate(20); //每页20
        return json($data);
    }

小程序端

 data: {
    current_page: 1, //默认第一页
    last_page: 0, //存储总页数
    data: [] //存放数据
  },

  onLoad: function (options) {
    wx.showLoading() 
    let self = this
    wx.request({
      url: 'https://xxxx',
      data:{key:'searchkey'}
      success: res => {       
        /*返回的数据格式如下
        current_page: 1
        data: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
        last_page: 331
        per_page: 10
        total: 3303
        */
        self.setData({ data: res.data.data,last_page:res.data.last_page })
        wx.hideLoading()
      } 
    })      
  },
  //页面上拉到底,加载更多
  onReachBottom: function () {
    console.log('到底了')
    let self = this
    let { current_page, last_page } = this.data
    if (current_page < last_page) {
      current_page++
      wx.showLoading()
      wx.request({
        url: 'https://xxxx',
        data: { page: current_page,key:'searchkey' },
        method: 'GET',
        success: res => { 
          self.setData({ data:self.data.data.concat(res.data.data), current_page })
          wx.hideLoading()
        } 
      })
    }
  }