小程序分页新写法

在这里插入图片描述

// 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() {}
})