小程序分页新写法

最新推荐文章于 2024-09-05 16:27:17 发布

WorkAndDebugger

最新推荐文章于 2024-09-05 16:27:17 发布

阅读量420

点赞数 2

分类专栏：微信小程序文章标签：小程序 javascript 开发语言

本文链接：https://blog.csdn.net/xiang_gong_ya_/article/details/139772861

版权

微信小程序专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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

  }
})