当前位置: 首页 > news >正文

vue3.2 前端动态分页算法

文章目录

    • 背景
    • 思路
    • 页面情况
    • 核心代码
    • 小结
    • 效果

背景

   1. 后台接口只是动态返回一个数组的数据,前端需要根据数据量的大小判断是否需要分页,页面高度固定2. 页面根据页数大小有不同的展示a. 只有一页  头部 + 内容 + 统计 + 尾部b. 多页i.  第一页 头部 + 内容 + 尾部ii. 中间页 内容 + 尾部iii. 最后一页 内容 + 统计 + 尾部

思路

	1. 先判断是否一页能满足 如果能满足 不做数据处理2. 不满足则肯定是多页a. 先计算第一页的逻辑,将数组分为[第一页数据, 剩余数据]b. 剩余数据只有两种情况i. 符合尾页逻辑 直接将剩余数据放入最后一页ii. 不符合尾页逻辑 递归实现中间页

页面情况

 s1 只有一页  不需要操作s2 多页a. 第一页因为要显示头部  所以高度为  540 - 50b. 中间页只显示内容      所以高度为  540c. 尾页因为要显示统计    所以高度为  540 - 50

核心代码

<template><div class="container"><div class="page" v-for="(list, index) in lists" :key="index"><div class="top" v-if="index === 0"><VHead /></div><div class="middle"><VTable :item="list" /><VTotal v-if="index === lists.length - 1" /></div><div class="bottom"><VFooter /></div></div></div>
</template><script setup>
import { ref, onMounted, nextTick } from 'vue'
import VHead from './components/VHead.vue'
import VTable from './components/VTable.vue'
import VTotal from './components/VTotal.vue'
import VFooter from './components/VFooter.vue'
import { init } from './data/index.js'const HEIGHT = 540const list = init(5)
const lists = ref([])const render = async () => {lists.value = [list]await nextTick()calculatePages()
}const getTrs = () => {const trEls = document.querySelectorAll('.v-table tbody tr')let trHeights = []for (let i = 0; i < trEls.length; i++) {trHeights.push(trEls[i].offsetHeight)}const trHeightsTotal = trHeights.reduce((acc, cur) => acc + cur, 0)return {trHeights,trHeightsTotal}
}const calculatePages = () => {const isSiglePage = getIsSinglePage()if (!isSiglePage) {const remainIndex = calculateFirstPage()lists.value = [list.slice(0, remainIndex)]calculateOtherPages(remainIndex)}
}const getIsSinglePage = () => {const { trHeightsTotal } = getTrs()if (trHeightsTotal + 100 > HEIGHT) {return false}return true
}const calculateFirstPage = () => {const { trHeights } = getTrs()const maxHeight = HEIGHT - 50let total = 0let index = 0for (let i = 0; i < trHeights.length; i++) {if (total + trHeights[i] > maxHeight) {break}total += trHeights[i]index = i}return index
}const calculateOtherPages = (remainIndex) => {const { trHeights } = getTrs()const remainTrHeights = trHeights.slice(remainIndex)const remainTrTotal = remainTrHeights.reduce((acc, cur) => acc + cur, 0)if (remainTrTotal + 50 > HEIGHT) {let total = 0let index = 0for (let i = remainIndex; i < trHeights.length; i++) {if (total + trHeights[i] > HEIGHT) {break}total += trHeights[i]index = i}if (index) {lists.value.push(list.slice(remainIndex, index))calculateOtherPages(index)}} else {lists.value.push(list.slice(remainIndex))}
}onMounted(() => {render()
})
</script><style lang="scss" scoped>
.container {display: flex;flex-direction: column;
}.page {width: 800px;height: 590px;border: 1px solid #ccc;display: flex;flex-direction: column;justify-content: space-between;margin-bottom: 2px;overflow: hidden;.top,.bottom {height: 50px;}.middle {flex: 1;overflow: hidden;}
}
</style>

小结

最开始想的是通过AI实现,经过多次测试发现AI实现的有很多缺陷,甚至需求都不明白,最后只能自己一步一步实现,想了很多方案,最终在此方案下符合需求。
如果有更好的方案,欢迎交流

效果

在这里插入图片描述
在这里插入图片描述

完整代码

http://www.lryc.cn/news/583015.html

相关文章:

  • 「Java案例」打印数字金字塔
  • [Backlog] 核心协调器 | 终端用户界面(TUI)实现 | 多分支任务冲突解决 | 测试验证体系
  • 技术支持丨解决 ServBay 在 Windows 启动时反复提示安装 .NET 的问题
  • Python(30)基于itertools生成器的量子计算模拟技术深度解析
  • 使用LLaMA-Factory微调Qwen2.5-VL-3B 的目标检测任务-数据集格式转换(voc 转 ShareGPT)
  • 【洛谷题单】--顺序结构(一)
  • C++高频知识点(六)
  • [NOIP][C++]洛谷P1376 [USACO05MAR] Yogurt factory 机器工厂
  • LeetCode--42.接雨水
  • C++(STL源码刨析/vector)
  • 从历史航拍图像中去除阴影
  • 11款常用C++在线编译与运行平台推荐与对比
  • 力扣-75.颜色分类
  • Web后端开发-Mybatis
  • qt-C++笔记之setCentralWidget的使用
  • 软件系统测试的基本流程
  • 数据结构*搜索树
  • 从零开始手写嵌入式实时操作系统
  • 牛市来临之际,如何用期权抢占反弹先机?
  • 初识mysql(一)
  • [特殊字符] AlphaGo:“神之一手”背后的智能革命与人机博弈新纪元
  • 【深度学习新浪潮】什么是蛋白质反向折叠模型?
  • 深度学习超参数优化(HPO)终极指南:从入门到前沿
  • FairyGUI 实现 Boss 双层血条动画
  • qt-C++语法笔记之Stretch与Spacer的关系分析
  • 分库分表之实战-sharding-JDBC水平分库+水平分表配置实战
  • LeetCode题解---<三数之和>
  • 自动化一次通过率
  • 深度学习环境配置:PyTorch、CUDA和Python版本选择
  • 深度剖析:向70岁老系统植入通信芯片——MCP注入构建未来级分布式通信