小程序分页新写法

news2024/11/19 18:23:08

在这里插入图片描述

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

  }
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1838369.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Sylar C++高性能服务器学习记录23 【Http模块-知识储备篇】

早在19年5月就在某站上看到sylar的视频了,一直认为这是一个非常不错的视频。 由于本人一直是自学编程,基础不扎实,也没有任何人的督促,没能坚持下去。 每每想起倍感惋惜,遂提笔再续前缘。 为了能更好的看懂sylar&…

Python10 python多线程

1.什么是python多线程 Python的多线程指的是在一个Python程序中同时运行多个线程,以达到并发执行多个任务的目的。线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位。 在Python中,多线程的…

C# OCCT Winform 选中模型改变状态

选中状态设置 _context new AIS_InteractiveContext(_viewer);var selectionDrawer new Prs3d_Drawer();selectionDrawer.SetColor(Colors.Selection);selectionDrawer.SetDisplayMode(1);selectionDrawer.SetTransparency(0.1f);_context.SetSelectionStyle(selectionDrawe…

【机器学习】机器学习重要方法——无监督学习:理论、算法与实践

文章目录 引言第一章 无监督学习的基本概念1.1 什么是无监督学习1.2 无监督学习的主要任务 第二章 无监督学习的核心算法2.1 聚类算法2.1.1 K均值聚类2.1.2 层次聚类2.1.3 DBSCAN聚类 2.2 降维算法2.2.1 主成分分析(PCA)2.2.2 t-SNE 2.3 异常检测算法2.3…

【Gradio】Chatbot | 如何使用 Gradio Blocks 创建自定义聊天机器人

简介 重要提示:如果您刚开始接触,我们建议使用 gr.ChatInterface 来创建聊天机器人——它是一个高级抽象,使得可以快速创建漂亮的聊天机器人应用程序,往往只需一行代码。在这里了解更多信息。 本教程将展示如何使用 Gradio 的低级…

【网络安全】简单的免杀方法(非常详细)零基础入门到精通,收藏这一篇就够了_免杀加壳工具

目录 一、免杀的概念 二、免杀系统搭建 三、免杀工具介绍 1、myccl 2、C32asm 3、OD 4、LordPE 5、ImportREC 6、VC6.0/visual studio 7、数字签名 四、关于杀软排名不分前后 1、360。 2、金山毒霸 3、江民 4、瑞星 5、安天防线 6、卡巴斯基 7、NOD32 8、诺…

【日记】被客户一顿输出该怎么办(431 字)

正文 上午有个客户在电话里对着我一顿输出,说他们没有发票财务账务没法处理怎么怎么的。话里话外满满一股 “全是你们的错” 的味道。 当时我很想笑,大姐,你对我输出有啥用啊。票是上级行开的,我们又没有开票权限,对我…

openEuler23.09安装MySQL8.4.0

在openEuler-23.09上安装MySQL8.4.0 一、MySQL数据库服务环境搭建 操作系统版本 openEuler-23.09-x86_64-dvd.iso ,安装步骤此处省略。。。 MySQL8.4.0下载地址 https://dev.mysql.com/downloads/mysql/ 1.1、下载及上传mysql二进制安装包 上传mysql-8.4.0-linu…

游戏中插入音效

一、背景音乐 准备:素材音乐 方法: 1、方法1: (1) 将背景音乐 bgAudio 拖放到Hierarchy面板 (2) 选中 bgAudio,勾选开始运行就播放、循环播放。调节音量(volume) 2、方法2: (1) Create Empty&#x…

Zabbix自定义监控JAVA进程

一.定义脚本 二 .ZABBIX得agent允许以root身份执行 三. Zabbix测试自定item是否成功 四.ZABBIX服务端web添加新得item项 五.查看最新数据,取值成功

002.Linux CentOS7 安装

我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 :👉&…

客户端输入网址后发生的全过程解析(协议交互、缓存、渲染)

目录 1. 输入 URL 并按下回车键2. DNS 解析3. TCP 连接4. 发送 HTTP 请求5. 服务器处理请求6. 发送 HTTP 响应7. 浏览器接收响应8. 渲染网页9. 执行脚本10. 处理其他资源11. TLS/SSL 加密(如果使用 HTTPS)握手过程 12. 协议协商和优化 总结 1. 输入 URL …

有关排序的算法

目录 选择法排序 冒泡法排序 qsort排序(快速排序) qsort排序整型 qsort排序结构体类型 排序是我们日常生活中比较常见的问题,这里我们来说叨几个排序的算法。 比如有一个一维数组 arr[8] {2,5,3,1,7,6,4,8},我们想要把它排成升序&#…

苹果将推出全新AI培训课程;生成式AI手机市场将迎来爆发式增长

🦉 AI新闻 🚀 苹果将推出全新AI培训课程 摘要:IT之家消息,苹果宣布,今年秋季将在6个国家的18所开发者学院推出AI培训课程,目标群体为学生、导师和校友。课程涵盖机器学习模型的构建及部署,Cor…

姜萍的启示:分数不是唯一,天赋引领专业选择超越名校

你好,我是三桥君。 24年高考帷幕落下,一场新的思考与选择悄然来临。 对于每一位高考考生,学校和专业都是开启大学新生活的两个前置必选项。 在这关键时刻,全网媒体却被一则关于“一名17岁中专女学生姜萍在全球数学竞赛获得第12名”…

数字孪生涉及到的9大技术栈,都是难啃骨头呀。

数字孪生涉及到多个技术栈,包括但不限于以下几个方面: 数据采集和传感器技术: 数字孪生需要实时获取物理世界的数据,因此需要使用各种传感器技术(如温度传感器、压力传感器、运动传感器等)来采集数据&…

排序(3)【归并排序】【计数排序】【排序算法度及其稳定性分析】

一.归并排序 归并排序(MERGE-SORT)是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列;即先使每个子序列有…

C++ 66 之 类模版

#include <iostream> #include <string> using namespace std;// 习惯性 < >中 类模板用class 普通的函数模板就用typename // template<class NAMETYPE, class AGETYPE> template<class NAMETYPE, class AGETYPE int> // 可以设置默认的类型值…

集团门户网站的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;论坛管理&#xff0c;集团文化管理&#xff0c;基础数据管理&#xff0c;公告通知管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;论坛&#xff0…

收银系统源码-千呼新零售2.0【线下促销】

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货等连锁店使用。 详细介绍请查看下…