小程序分页新写法

// pages/query/query.js
import {
    
  request
} from '../../utils/request';
Page({
    

  /** * 页面的初始数据 */
  data: {
    
    tabClickIndex: '',
    page: 1,
    limit: 10,
    listData: []
  },

  /** * 生命周期函数--监听页面加载 */
  onLoad(options) {
    
    this.getList()
  },

  /** * 生命周期函数--监听页面初次渲染完成 */
  onReady() {
    

  },

  /** * 生命周期函数--监听页面显示 */
  onShow() {
    

  },
  getList() {
    
    request('/api/list', 'get', {
    
      page: this.data.page,
      limit: this.data.limit,
      status: this.data.tabClickIndex
    }).then((res) => {
    
      console.log(res);
      if (res.msg === 'success') {
    
        const newData = res.data;
        // 将新数据拼接到现有数据上
        this.setData({
    
          listData: this.data.listData.concat(newData),
          // 根据返回的总条数和当前页计算是否有更多数据 hasMore为false 返回的数据没有那你多了 则没有更多数据
          hasMore: newData.length === this.data.limit,
        });
      }
    })
  },
  listItemClcik() {
    
    wx.navigateTo({
    
      url: '/pages/Details/Details',
    })
  },
  tabClcik(e) {
    
    console.log(e);
    this.setData({
    
      page: 1,
      listData: [],
      tabClickIndex: e.target.dataset.index
    })

    wx.pageScrollTo({
    
      scrollTop: 0,
      duration: 300
    })

    this.getList()
    console.log(this.data.tabClickIndex, 'tabClickIndex');
  },
  /** * 生命周期函数--监听页面隐藏 */
  onHide() {
    

  },

  /** * 生命周期函数--监听页面卸载 */
  onUnload() {
    

  },

  /** * 页面相关事件处理函数--监听用户下拉动作 */
  onPullDownRefresh() {
    

  },

  /** * 页面上拉触底事件的处理函数 */
  onReachBottom() {
    
    console.log('onReachBottom');
    if (this.data.hasMore) {
    
      this.setData({
    
        page: this.data.page + 1
      })
      this.getList()
    } else {
    
      wx.showToast({
    
        title: '没有更多数据啦！',
        icon: 'none'
      })
    }
    console.log(this.data.page);
  },

  /** * 用户点击右上角分享 */
  onShareAppMessage() {
    

  }
})