uni-app中分页器的实现

devtools/2024/9/23 14:36:24/

一、template

change函数在每次点击上一页 或者写一页的时候会触发,其传递的参数是当前的current页数

<uni-section class="fixed-bottom" title="默认样式" type="line" padding><uni-pagination @change="handleList" :current="current" :pageSize="8" :total="total" title="标题文字"/>
</uni-section>

二、data

     LicenceNum : undefined,  //查询须要的参数checkList: [],total: 0,current: 1

三、methods函数

      handleList(e) {console.log(e, 'eeeeeeeeeeeee')this.current = e.currentlet obj = {pageSize: 8,pageNum: e.current,}checkList(this.LicenceNum ,obj).then(res => {this.checkList = res.rows})}

四、onLoad函数

        onLoad(e) {this.LicenceNum = e.num;this.userId = e.userIdlet obj = {pageSize: 8,pageNum: 1}checkList(e.num, obj).then(res => {console.log(res, 'ddd')this.total = res.totalthis.checkList = res.rows})}

五、总结

刚进页面的时候,接收上一个页面传递过来的查询参数,此时调用后端查询接口,这时候的pageSize和pageNum值是固定的,默认查询第一页,同时将数据总条数设置给total,组件会自动根据你设置的pageSize大小和后端查询出的total计算出总的页数。后面就是用户点击上一页或者下一页按钮来触发change函数,传来当前的页数,你再去调用接口查询当前页码的数据即可。


http://www.ppmy.cn/devtools/103437.html

相关文章

Linux学习笔记(4)----Debian压力测试方法

使用命令行终端压力测试需要两个实用工具&#xff1a;s-tui和stress sudo apt install s-tui stress 安装完成后&#xff0c;在终端中启动 s-tui实用工具&#xff1a; s-tui 执行后如下图&#xff1a; 你可以使用鼠标或键盘箭头键浏览菜单&#xff0c;然后点击“压力选项(Str…

RabbitMQ高级特性

目录 前言 数据持久化原理 1. 数据持久化概述 2. 消息持久化 3. 队列持久化 4. 磁盘与内存持久化 RabbitMQ高级特性 1. 惰性队列&#xff08;Lazy Queues&#xff09; 2. 优先级队列&#xff08;Priority Queues&#xff09; 3. 死信队列&#xff08;Dead Letter Exc…

LuaJit分析(一)LuaJit交叉编译

​​​​​​Android 使用ndk版本 r16b 在luajit2.1.0-beta3目录下创建一个脚本文件&#xff0c;armv7编译代码如下&#xff1a; make clean NDKE:/android-ndk-r16b #ndk路径 NDKABI21 NDKTRIPLEarm-linux-androideabi NDKVER$NDK/toolchains/$NDKTRIPLE-4.9 NDKP$NDKVER/…

黑马JavaWeb开发笔记06——Vue(概述、指令、生命周期)

文章目录 前言一、Vue概述1. MVVM前端开发思想2. 框架是什么3. Vue介绍4. Vue快速入门 二、Vue常用指令三、Vue生命周期总结 前言 本篇文章是2023年最新黑马JavaWeb开发笔记06&#xff1a;Vue&#xff08;概述、指令、生命周期&#xff09;的总结&#xff0c;帮助需要学习Web开…

【Go函数详解】二、参数传递、变长参数与多返回值

文章目录 一、传递参数1. 按值传参2. 引用传参2.1 特殊情况2.1.1 切片slice2.1.2 字典map 二、变长参数1. 基本定义和传值1.1 基本定义1.2 传值1.2.1 普通传值1.2.2 传递切片 2. 任意类型的变长参数&#xff08;泛型&#xff09; 三、多返回值1. 命名返回值 一、传递参数 1. 按…

ARCGIS 纸质小班XY坐标转电子要素面(2)

本章用于说明未知坐标系情况下如何正确将XY转要素面 背景说明 现有资料&#xff1a;清除大概位置&#xff0c;纸质小班图&#xff0c;图上有横纵坐标&#xff0c;并已知小班XY拐点坐标&#xff0c;但未知坐标系。需要上图 具体操作 大部分操作同这边文章ARCGIS 纸质小班XY…

VS Code 代码片段指南: 从基础到高级技巧

今天咱们来聊聊 VS Code 里的自定义代码片段。 这玩意儿简直是提升编码效率的神器, 用好了能让你敲代码更方便! 不管你是刚入行的菜鸟还是身经百战的老兵,这篇攻略都能让你在代码片段的世界里玩得飞起。 系好安全带,我们开始起飞啦! 代码片段是啥玩意儿? 简单说, 代码片段…

【vue】Vue项目中引入外部字体文件

首先准备好字体包 新建一个css引入字体 font-face {font-family: "fangsong";src: url(./fangsong.ttf);font-weight: normal;font-style: normal; } 然后main里面引入一下 使用的时候&#xff1a; ok~~