一、需求

Qt+HTML+JS实现Dialog中展示HTML页面，参数结构包括不定项Array。

二、分析

由于本人完全不会Qt，去查了一下Qt怎么展示HTML页面，貌似只要有HTML页面的本地URL即可。
因为参数有不定项Array，每一页展示数量有限，需要多页展示，并实现翻页。
此时有两条路：
方案1 - Qt把翻页功能做好了，前端只需要写多个HTML文件，分别展示数据，把HTML文件一一丢给Qt就行
问题：确定不了HTML页面数量，JS又没办法控制新建HTML文件（至少我不会，也没查到怎么搞）
结论：方案1 这个不行
方案2 - 分页功能和翻页功能都在前端实现HTML+JS
问题：虽然不知道Qt怎么加载HTML文件，但是应该没问题
结论：方案2 这个行

另外的情况：
1 - 由于只有几个页面，为了减少无用代码体量，所以没用依赖，决定用纯原生JavaScript写

三、开干

1. 继续分析

1 - 参数不确定Array的length，所以把固定表单页用HTML搭好，其余表单内容全用JS循环往HTML里灌
2 - 需要分页&翻页，页码展示结构搭好，页码也用JS往HTML里灌
3 - 不能写多个HTML文件，展示不同页面隐藏其他页面，此处用position:absolute + opacity:0，即可解决元素占位问题，又能获取到元素（display:none拿不到元素）（CSS隐藏元素方法总结单独写一篇吧）

2. 上代码

思路

  1. // 外面传进来的参数
  2. data = {...}
  3. // 两个公共数据，当前页码&总页数
  4. const m = {
  5.   thisPage:1, // 开始默认展示第一页
  6.   pages:0
  7. }
  8. // 获取总页数，根据Array.length和每一页展示项数，获取总页数
  9. function getPages(data){
  10.     const pages = ...
  11.   m.pages = pages
  12. }
  13. // 分页，创建页面
  14. function renderPageN(data){
  15.     // 用innerHTML把新页面全循环写进去
  16.   // 循环时给最外层元素添加递增id，后面通过id控制页面显示
  17.   // 最外层元素添加相同的className，后面需要根据className获取页面列表
  18. }
  20. // 根据总页数，初始化页码
  21. function initFooterPages(){
  22.     // 两种情况
  23.     // 1.总页数小于页码能够展示的总数 全展示
  24.   // 2.总页数大于页码能够展示的总数 需要加 ... 如： 1 2 3 4 5 6 ... 15
  25. }
  26. // 页码变化，更新页面，更新footer页码
  27. function renderFooterPages(){
  28.     const wrapper = document.querySelector('#页码容器id')
  29.   // 清空子元素（旧页码）
  30.   while (wrapper.hasChildNodes()) {
  31.     wrapper.removeChild(wrapper.firstChild);
  32.   }
  33.   // 重新写入子元素（新页码）几种情况
  34.   if('页码能显示全'){}                    // 1 2 3 4 5
  35.   else if('页码显示不全'){            // 1 2 3 4 ... 12
  36.       if('当前页在中间'){}                // 1 ... 4 5 6 7 8 ... 12        thisPage=6
  37.     else if('当前页在前面'){}        // 1 2 3 4 5 ... 12                    thisPage=3                 
  38.     else if('当前页在后面'){}        // 1 ... 8 9 10 11 12                thisPage=10
  39.   }
  40. }
  41. // 当前页匹配展示页
  42. function renderCurrentPage(){
  43.     // 重置所有页面opacity=0
  44.   const pagesList = [...document.querySelectorAll('.页面最外层的className')]
  45.   pagesList.forEach(item=>{
  46.     item.style.opacity = '0'
  47.   })
  48.   // 匹配当前页opacity=100
  49.   const thisId = '#page'+ m.thisPage
  50.   document.querySelector(thisId).style.opacity = '100'
  51. }
  52. // 到这里就基本搞定了，前进后退按钮，和页面跳转功能，控制m.thisPage +1/-1就行了