小程序分页新写法

在这里插入图片描述

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

  }
})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uniapp运行到模拟器(联想模拟器)

记录一下uniapp项目运行到联想模拟器的流程 先配置一下模拟器端口 填写对应的adb路径,也就是模拟器安装路径下的adb.exe的路径 然后打开模拟器的设置,搜索版本找到版本号,多次点击打开开发者模式 进入开发者选项,打开USB调试 …

QT 中QcomboBox控件的详细用法

在Qt中,QComboBox 是一个用于选择下拉列表中的项目的控件。它继承自 QWidget 并提供了许多成员函数来操作和管理这个下拉列表。以下是一些常用的 QComboBox 成员函数及其基本用法: 构造函数 QComboBox(QWidget *parent nullptr): 创建一个新的 QCombo…

职业探索-性能测试01-性能工程师成长路径-性能测试的核心概念-性能测试的全周期概览

职业探索-性能测试01-性能工程师成长路径-性能测试的核心概念-性能测试的全周期概览 参考来源 极客时间专栏:高楼的性能测试实战30讲 课程链接:https://time.geekbang.org/column/intro/100042501 性能测试分析的能力阶梯视图 性能工程师 真正的性能…

FuTalk设计周刊-Vol.034

🔥AI漫谈 热点捕手 1、反转反转再反转!OpenAI“内斗”风波始末 故事还远远没有结束,一场“宫斗”解决不了商业世界影响下科技发展的路线之争,或许未来还将有很多“选择”将困扰这家年轻的企业,这是AI领域发展下必将经…

【论文阅读】-- 时间空间化:用于深度分类器训练的可扩展且可靠的时间旅行可视化

Temporality Spatialization: A Scalable and Faithful Time-Travelling Visualization for Deep Classifier Training 摘要1 引言2 动机3 问题定义4 方法论4.1 时空复合体4.2 复数约简 5 实验6 相关工作7 结论参考文献 摘要 时间旅行可视化回答了深度分类器的预测是如何在训练…

【单片机毕业设计选题24015】-基于物联网的家用智能充电桩计费系统设计

系统功能: 采用STM32最小系统板控制 1. 通过IM1281B电能计量模块读取系统电压电流功率电能等信息 2. 通过ESP8266WiFi模块连接阿里云 3. 使用RFID模块刷卡 4. 继电器模块控制充电 5. 12864OLED模块显示系统信息 6. 开启充电但检测不到系统电压时蜂鸣器模块报警。 主要功…

delphi 开发app

好的工具用起来就会顺手,很多Delphi从业者用惯了Delphi工具,在面对移动APP称王的时代似乎有力使不出。现在不用再担心JAVA语言的一些特性,太纠结了。我们直接用Delphi XE7开发吧。虽然Delphi XE2开始就支持移动开发了,但这中间的五…

ubuntu永久换镜像源详细方法

1.查看ubuntu的版本,不同的版本对应的不同的镜像源(下面会讲到,先按步骤操作即可) cat /etc/issue 2.先备份一个,防止更改错误 cp /etc/apt/sources.list /etc/apt/sources.list.backup 3.备份好之后删除原有的sour…

VUE 项目用 Docker+Nginx进行打包部署

一、Docker Docker 是一个容器化平台,允许你将应用程序及其依赖项打包在容器中。使用 Docker,你可以创建一个包含 Vue.js 应用程序的容器镜像,并在任何支持 Docker 的环境中运行该镜像。 二、Nginx Nginx 是一个高性能的 HTTP 服务器和反向…

能提醒我重要工作事项的软件是什么 工作提醒软件

在工作中,我们总是不可避免地需要处理各种琐碎而重要的事项。然而,人的记忆力毕竟有限,尤其是在忙碌和高压的工作环境下,遗忘似乎成了一个难以避免的问题。想象一下,你因为一个疏忽忘记了一个重要的会议,或…

UE4_材质_雨滴涟漪效果ripple effect_ben教程

学习笔记,不喜勿喷!侵权立删,祝愿生活越来越好! 雨水落下时会产生这些非常漂亮的同心环波纹,我们要做的第一件事是创建一个单个的圆环遮罩动画,我们希望环在开始的时候在中心很小,然后放大&…

【漏洞复现】海康威视 综合安防管理平台软件 center_api_files 任意文件上传漏洞

免责声明: 本文内容旨在提供有关特定漏洞或安全漏洞的信息,以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步,并非出于任何恶意目的。阅读者应该明白,在利用本文提到的漏洞信息或进行相关测…

AI大模型的战场:通用大模型VS垂直大模型,谁会赢?

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

C语言 | Leetcode C语言题解之第162题寻找峰值

题目&#xff1a; 题解&#xff1a; int findPeakElement(int* nums, int numsSize) {int ls_max0;for(int i1;i<numsSize;i){if(nums[ls_max]>nums[i]);else{ls_maxi;}}return ls_max; }

部署LVS-NAT群集

目录 LVS-NAT模式部署 ​1.准备工具 2.所有虚拟机初始化 3.配置NFS共享存储&#xff08;20.0.0.40&#xff09; 3.1安装软件包 3.2创建共享目录和测试文件 4.web服务器部署&#xff08;20.0.0.20 20.0.0.30配置相同&#xff09; 4.1yum安装nginx服务 4.2测试nfs共享服…

上海科技博物馆超薄OLED柔性壁纸屏应用方案

产品&#xff1a;2组55寸OLED柔性屏2x1 特点&#xff1a;嵌入墙体&#xff0c;与空间装饰融入一体 用途&#xff1a;播放文物展示 一、项目背景 上海科技博物馆作为展示科技与文化的交汇点&#xff0c;一直致力于为观众提供沉浸式的参观体验。为了提升文物展示的现代化和科技感…

计算机网络:运输层 - 概述

计算机网络&#xff1a;运输层 - 概述 运输层的任务端口号复用与分用UDP协议首部格式 TCP协议面向字节流 运输层的任务 物理层、数据链路层以及网络层&#xff0c;他们共同解决了将主机通过网络互联起来所面临的问题&#xff0c;实现了主机到主机的通信。 网络层的作用范围是…

RIP路由协议汇总、版本兼容、定时器、协议优先级配置(华为)

#交换设备 RIP路由协议汇总 一、原理概述 当网络中路由器的路由条目非常多时&#xff0c;可以通过路由汇总&#xff08;又称路由汇聚或路由聚合&#xff09;来减少路由条目数&#xff0c;加快路由收敛时间和增强网络稳定性。路由汇总的原理是&#xff0c;同一个自然网段内的…

python GUI开发: tkinter菜单创建,记事本和画图软件综合项目的实战演练

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

Python基础用法 之 运算符

1.算数运算符 符号作用说明举例加与“”相同 - 减与“-”相同*乘 与“ ”相同 9*218/除 与“ ”相同 9/24.5 、6/32.0//求商&#xff08;整数部分&#xff09; 两个数据做除法的 商 9//24%取余&#xff08;余数部分&#xff09; 是两个数据做除法的 余数 9%21**幂、次方2**…