自定义分页器

article/2025/8/24 5:14:10

前端必须要掌握的分页器轮播图与日历   手写,掌握原理   

1:分页功能实现

 为什么很多项目采用分页功能:比如电商平台有很多数据。一次加载出来会卡住

 采用分页功能

Element Ul是有相应的分页组件,使用起来超级简单,但是咱们前台项目目前不用【掌握自定义分页器的功能】

2:分页器需要哪些数据(条件)?

需要知道当前是第几页:pagNo字段代表当前页数

需要知道每一页需要展示多少条数据:pageSizs字段进代表

需要知道整个分页器一共有多少条数据:total字段进行代表---【获取另外一条信息:一共多少页】

需要知道分页器连续的页码个数:一般是5或者7【奇数】对称

举列子:每一页10条数据 一共91条数据 【一共是十一页】

总结:对于分页器而言:自定义前提需要知道四个前提条件。

pageNo:当前第几页

pageSizs:代表每一页展示多少条数据

total:代表整个分页一共要展示多少条数据

continues:代表分页连续页码个数

—————————------以上是分析——————————————— 

3.自定义分页器,在开发的时候先自己传递假的数据进行调试,调试成功以后在用服务器数据。 

因为我这里是在vue中并且是父给子传所以用poros 

在子组件中接收一下

4...接收数据一眼就能做的事【总条数】

然后计算出有多少页

 

 接下来计算出起始数字与结束数字

5.分页器动态展示   分为上中下【先来中间部分】

注意v-for是可以遍历:数组|数字|字符串|对象   平时只用数组不要认为只能数组

注意上图是静态时候的结构

 然后用v-for来遍历 ,用v-if来限制他  v-if虽然有提示,但是是没有报错的 也可以用v-show替换

然后

 

 然后把父组件的值改为动态的

 

 

 


http://chatgpt.dhexx.cn/article/GH13Pyjg.shtml

相关文章

【JS案例】分页器——使用原生JavaScript实现

在使用vue编写完一个分页器组件后,我对分页器的底层逻辑产生了兴趣,想在此组件的基础上再深入了解一些分页器的底层逻辑,了解vue与原生js的区别。我在github上看了一些大神写的分页器,属实牛逼,之后自己也根据他们的编…

zigbee-无线点灯-协调器节点

开发环境:IAR 8.10 Z-stack 2.5 功能:协调器与终端节点组网,实现点对点通信。终端向协调器发送“D1”,协调器LED灯闪烁。 流程图: 具体代码: 定义所需要的变量 端点描述符 endPointDesc_t GenericApp_e…

十分钟入门Zigbee

大部分教程通常都是已Zigbee原理开始讲解和学习,各种概念让初学者难以理解。本教程从一个小白的角度出发,入门无需任何Zigbee底层原理知识,只需要基本的MCU研发经验就可以掌握,让您快速实现zigbee组网和节点之间通信。 本教程采用…

第一章:zigbee学习笔记之简介(上)

注:文章转载自https://blog.csdn.net/tainjau/article/details/81540013 写在前面: 最近开始搞智能家居的项目,之前只是了解过zigbee,但是并未深入学习过,所以工作之余,忙里偷闲下,学习一下zigb…

zigbee菜鸟笔记(一)zigbee的基础知识

一.什么是zigbee 有问题发送邮件至468078841qq.com ZigBee,也称紫蜂,是一种低速短距离传输的无线网上协议,底层是采用IEEE 802.15.4标准规范的媒体访问层与物理层。主要特色有低速、低耗电、低成本、支持大量网上节点、支持多种网上拓扑、低…

TI CC2538 做ZigBee协调器控制飞利浦 Hue 调色灯

【源码、文档、软件、硬件、技术交流、技术支持,入口见文末】 一、实验准备 1.1 硬件准备 1.1.1 CC2538 模块 本文中使用的 CC2538 模块是带 PA 芯片(CC2592)的。此外,最好是带焊接好的底板,便于后面与串口转USB…

使用zigbee的协议栈进行协调器路由器终端初始化

实验目的: 使用协议栈,外加自己写的数码管的代码模块 配置协调器路由器终端,各自对应数码管数字C,R,E。 本身不是很细致,只是把一些重要步骤截了一下,IAR工程什么的默认大家都会了。 zigbee协议栈的下载 下载完找以下文件夹 找到下面两个文件夹,然后复制出来放到自己的…

zigbee z-stack 协调器断电后,重新上电无法恢复

1、是否宏定义了NV_RESTORE1;NV_INIT1;(协调器、路由器、终端都要定义)定义位置如下 2、下载模式选Erase flash,选择位置:(20201117修正:实际调试发现如果不许选择erase flash 协调器断电重连&a…

ZigBee中协调器断电重连问题?

问题描述:如果你想实现一个完好的网络,协调器断电重启后还是能加入原来的网络,加上NV_RESTORE编译选项就可以,如果发现加上它,还是实现不了要求,就请作如下操作? 方法:如果加了NV_R…

Zigbee协调器主动使终端节点退网

我使用ZDP_MgmtLeaveReq()这个函数来让已知短地址的终端退网,代码如下:我这样使用的结果是,可以将节点退网,节点上也需要做一些配置。我在函数里禁止节点重连,但是节点退网后会获取到新的短地址重新入网,这…

ZIGBEE 工程内区分终端与协调器

目前已知,工程中区分是终端还是协调器,与工程中Tolls文件夹中的.cfg文件有关: 从project->Edit Configuration进去可以删减左边栏Workspace下拉的项: 区别终端、路由器和协调器是通过Options.. -> C/C Compiler -> Extra…

Zigbee应用开发 协调器控制多个终端

协调器控制多个终端 功能要求: 协调器通过串口向终端发送控制命令 发送1 则终端1 的D8灯亮 发送 2 则 终端2 的灯亮 发送 0 则 俩个终端都灭 实现过程: 当网络状态发生改变时,通过串口打印一串消息用来分辨串口调试对应着那种类型的Zigbee 终端编程&…

zigbee现存网络下更换协调器

应用场景:现场协调器坏了,更换协调器,只改panid、加密信息、信道等是不行的 因为之前坏掉的协调器已经创建了一个网络,即使旧协调器坏了,网络还在,新协调器如果开机前没有之前的网络设备处于开启状态&…

ZIGBEE 协调器(刷写程序后)PAN_ID+1,与原来路由器无法组网

ZIGBEE 协调器(刷写程序后)PAN_ID1,与原来路由器无法组网 原因:或许是你下载时,勾选了Erase flash选项,如下图原因简析 原因:或许是你下载时,勾选了Erase flash选项,如下…

基于Zigbee的SHT10温湿度数据采集系统(已实现控制12个终端节点)——Zigbee协调器主要代码解析

之前实现了基于Zigbee的SHT10温湿度数据采集系统,这里来重新复盘一些主要的知识和代码。 写在前面: 1 功能介绍:使用Zigbee终端节点采集环境的温度和湿度数据,然后将数据无线发送的Zigbee协调器,最后在电脑端显示获得…

ZigBee协调器,ZigBee智能节点盒

新设备下 1.安装CP210xVCPInstaller_x64.exe串口驱动 2.连接USB转串口,RS485转232,蓝色数据线连ZigBee协调器485A,黄色数据线连ZigBee协调器485B,USB口连PC 3.查看COM口 4.打开ZigBeeTool.exe一应用程序 5.选择COM口,…

zigbee基本概念--网络设备类型和PANID

Zigbee 是一种基于802.15.4 物理层协议、支持自组网、多点中继,可实现网状拓扑的复杂的 组网协议,加上其低功耗的特点,使得网络间的设备必须各司其职,有效地协同工作。 Zigbee 网络的设备类型 在Zigbee 网络中,有三种不…

一文带你了解 ZigBee

1、物联网通信协议 常见短距离无线通信协议 物联网通信协议 接入方式-云端协议 支持 TCP/IP 的物联网设备,可以通过 WIFI、蜂窝网络以及以太网,使用 HTTP、MQTT、CoAP、LwM2M 以及 XMPP 等应用层协议协议接入云端。 接入方式-网关协议 网关协议是适用…

大数据产业链包括哪几个环节,具体包含哪些内容

大数据作为继云计算、物联网之后IT行业又一颠覆性的技术,备受关注,要想知道大数据创业方向,一定要知道,大数据产业链包括哪几个环节,具体的包含内容,接下来,为大家一一介绍: IT基础…