【H5开发】02手把手带你开发H5列表页面 ~ 包含查询、重置、提交功能

最新推荐文章于 2024-08-30 16:56:09 发布

小白Rachel

最新推荐文章于 2024-08-30 16:56:09 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/Sabrina_cc/article/details/119888243

版权

本文介绍了如何通过H5开发一个具有复杂功能的页面，包括从数据库获取数据、年度季度筛选、评分弹窗、数据提交与批量提交流程。开发者学习了如何使用MobileSelect组件、AJAX请求、滚动翻页和后端接口交互。

摘要由CSDN通过智能技术生成

不要害怕孤独，因为这个世界上总有一个人在努力走向你。

上节回顾：从一个简单页面带你体验H5开发https://blog.csdn.net/Sabrina_cc/article/details/119865234

这一节我们来做一个稍微有点难度的页面。首先还是上原型和UI设计

了解主要功能：（1）数据库获取列表数据展示（2）年度、季度、部门、岗位的查询（3）重置（4）点击某一项弹出评分框-获取该条数据打分详情并展示（5）点击保存按钮发送请求、提交数据（6）点击提交按钮按照年份、季度提交所有记录。

确实比昨天的复杂一些，不过一步一步来，现在就开始吧。

1. 根据设计稿先写出前端静态页面

<body>
  <div class='top'></div>
  <div id="index-mask" class="index-mask" title="测评-首页">
    <div class="dqkhzq">
      <span class="khzq">当前考核周期：</span>
    </div>
    <div class="allDiv">
      <div class="divWrap" style="position:relative">
        <div class="divLeft">年份</div>
        <div class="divRight" id="year" style="padding-right:0.4rem;"> <input placeholder='请选择' value="2021"
            style="border:none;text-align:right;" id="yearInit" />
        </div>
        <img src="./images/kaoqin/xiala.png" style="width:0.25rem;height:0.14rem;position: absolute;
        top: 0.35rem;right:0.4rem;" />
      </div>
      <div class="hpVertical"></div>
      <div class="divWrap" style="position:relative">
        <div class="divLeft">季度</div>
        <div class="divRight" id="jidu" style="padding-right:0.4rem;"> <input id="jiduInit" placeholder="请选择"
            value="第二季度" style="border:none;text-align:right;" />
        </div>
        <img src="./images/kaoqin/xiala.png" style="width:0.25rem;height:0.14rem;position: absolute;
        top: 0.35rem;right:0.4rem;" />
      </div>
    </div>
    <div class='allDiv'>
      <div class="divWrap" style="position:relative">
        <div class="divLeft">部门</div>
        <div class="divRight" id="bumen" style="padding-right:0.4rem;"> <input id="bumenInit" placeholder='请选择'
            style="border:none;text-align:right;" />
        </div>
        <img src="./images/huping/xiala.png" style="width:0.25rem;height:0.14rem;position: absolute;
        top: 0.35rem;right:0.4rem;" />
      </div>
      <div class="hpVertical" style="position:relative"></div>
      <div class="divWrap" style="position:relative">
        <div class="divLeft">岗位</div>
        <div class="divRight" id="gangwei" style="padding-right:0.4rem;"> <input id="gangweiInit" placeholder='请选择'
            style="border:none;text-align:right;" />
        </div>
        <img src="./images/huping/xiala.png" style="width:0.25rem;height:0.14rem;position: absolute;
        top: 0.35rem;right:0.4rem;" />
      </div>
      <div class="hpVertical" style="position:relative"></div>
      <div class="divWrap" style="justify-content: flex-end;">
        <span class="btncx" onclick="getDPList()">查询</span>
        <span class="btncz" onclick="resetList()">重置</span>
      </div>
    </div>
    <div id="content_1" class="content_1"></div>
    <!-- <div class="allDiv">
      <div class="divWrap">
        <div class="divLeft">姓名</div>
        <div class="divRight">刘明</div>
      </div>
      <div class="hpVertical"></div>
      <div class="divWrap">
        <div class="divLeft">部门</div>
        <div class="divRight">刑事侦察大队</div>
      </div>
      <div class="hpVertical"></div>
      <div class="divWrap">
        <div class="divLeft">岗位</div>
        <div class="divRight">综合管理岗</div>
      </div>
      <div class="hpVertical"></div>
      <div class="divWrap">
        <div class="divLeft">考核类型</div>
        <div class="divRight">非领导成员公务员</div>
      </div>
      <div class="hpVertical"></div>
      <div class="divWrap">
        <div class="divLeft">状态</div>
        <div class="divRightBlue">待提交</div>
      </div>
      <div class="hpVertical"></div>
      <div class="divWrap">
        <div class="divLeft">得分</div&g