当前位置：网站首页>[H5 development] 01 take you to experience H5 development from a simple page ~ the whole page implementation process from static page to interface adjustment manual teaching

[H5 development] 01 take you to experience H5 development from a simple page ~ the whole page implementation process from static page to interface adjustment manual teaching

2022-06-26 04:30:00 【Rachel】

All the ending is also the beginning , We just didn't know it at that time .----------- The five people you met in heaven

  The first thing you need to know is , Some tool pages necessary for front-end development ：

（1） Prototype design draft （ For understanding system functions ）--->    The product manager

（2）UI Design draft （ For strict page layout and style development ）--->UI Design

（3） Interface document （ Front and rear end joint debugging , The basis of field definition ）---> The backend development

（4） Test documentation （ Modify assigned bug）--->  test

1. First, let's take a look at our target page and UI Design draft

  About the page functions ： The list shows the data ！

More details ： After loading the page , Render one by one according to the data returned from the back end , Display the data

Let's start

2. First build the document

Generally in the project engineering documents , Create a new page directly under the general directory notice.html, At the same time css New under file notice.css For the images that need to be used on the page , Can be placed in images I'm gonna go ahead and create a new folder notice in .Js Files generally contain general code ,common Under the folder are general page components , Such as header.html

 3. Write notice.html Static page styles 

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="./css/notice.css" rel="stylesheet" type="text/css">
  <link rel="import" href="./common/header.html" id="page1" />
  <link rel="stylesheet" href="./css/mobileSelect.css">
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script src="./js/config.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <title> notice </title>
  <script type='text/javascript'>
    window.onload = function () {
      /*750 Represents the width of the design draft given by the designer , How much is your design , Just write as much as you want ;100 Represents the conversion ratio , Write here 100 yes 
         For future easy calculation , such as , One width you measure is 100px, It can be written as 1rem, as well as 1px=0.1rem wait */
    };
    $(document).ready(function () {
      getRem(750, 100)
      $('.top').load('./common/header.html');
    });
    window.onresize = function () {
      getRem(750, 100)
    };
    function getRem(pwidth, prem) {
      var html = document.getElementsByTagName("html")[0];
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
      html.style.fontSize = oWidth / pwidth * prem + "px";
    }
  </script>
</head>
<body>
  <div class='top'></div>
  <div id="index-mask" class="index-mask" title=" notice - home page ">
    <div class="dqkhzq">
      <span class="khzq"> Current appraisal cycle ：</span>
    </div>
    <div class="allContent" id="allContent"></div>
    <div class="noticeDiv">
      <div class="divTitle"> Title content content </div>
      <div class="divContent"  id="content" style="padding-right:0.4rem;">
         Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
      </div>
    </div>
<div class="noticeDiv">
      <div class="divTitle"> Title content content </div>
      <div class="divContent"  id="content" style="padding-right:0.4rem;">
         Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
      </div>
    </div>
  </div>
</body>

 ４. contrast UI Design draft modification style 

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
body {
  font-size: 10px;
  -webkit-text-size-adjust: none;
  background-color: #f4f4f4 !important;
  font-family: ' Microsoft YaHei ';
}
.dqkhzq {
  height: 0.8rem;
  background-color: #ffffff;
  font-size: 0.3rem;
  font-weight: 400;
  line-height: 0.8rem;
  color: #1d1d1d;
  padding-left: 0.21rem;
  margin-top: -0.2rem;
}
.khzqinner {
  color: #005fc9;
}
.khzq {
  border-bottom: 0.04rem solid #005fc9;
  height: 0.78rem;
  display: inline-block;
  padding-left: 0.15rem;
}
.divWrap {
  background-color: #ffffff;
  display: flex;
  color: #2c2c2c;
  font-size: 0.3rem;
  justify-content: space-between;
  align-items: center;
  height: 0.89rem;
  line-height: 0.89rem;
  padding-left: 0.32rem;
  padding-right: 0.4rem;
}
.noticeDiv {
  width: 7.11rem;
  height: 2.88rem;
  margin: 0 auto;
  margin-top: 0.3rem;
  border-radius: 0.1rem;
  background-color:#ffffff;
  padding-top: 0.31rem;
  padding-bottom: 0.35rem;
} 
.hpVertical {
  width: 6.48rem;
  height: 1px;
  opacity: 1;
  background: #d2d2d2;
  margin: 0 auto;
}
.divTitle {
  opacity: 1;
  font-size: 0.30rem;
  font-weight: 400;
  text-align: left;
  color: #2c2c2c;
  line-height: 0.60rem;
  padding-left: 0.28rem;
}
.divContent {
  /* width: 6.56rem; */
  height: 1.73rem;
  opacity: 1;
  font-size: 0.30rem;
  font-weight: 400;
  text-align: left;
  color: #727272;
  line-height: 0.48rem;
  padding-left: 0.28rem;
  padding-right: 0.27rem;
}
.allDiv {
  width: 7.11rem;
  margin: 0 auto;
  margin-top: 0.3rem;
  border-radius: 0.1rem;
  background-color:#ffffff;
}

5. Function realization

You can see through the interface , Our request is POST Method , The request data contains  pageNum and pageSize, And a lot of data has been obtained , We can only use title content that will do .

（1） Define global variables 

var pageNum = 1; // The default is to access... From the first page 
var pageSize = pageSizeGlobal; // The default number of accesses to a page 
var isMore = false;  // Control page turning 
getList(pageNum, pageSize);

（2）  Compiling method , Get the initial data of the page ：

//  Get data list function 
  function getList(pageNum, pageSize) {
    console.log("getlist")
    $.ajax({
      type: "post",
      url: urlGlobal + "/api/h5/sys/notice/self/page",
      async: true,
      dataType: "json",// Background return value type 
      contentType: "application/json;charset=utf-8", // If the submission is json data type , This parameter is required , Indicates the type of data submitted  
      async: false,// Asynchronous requests 
      data: JSON.stringify({
        pageNum: pageNum,
        pageSize: pageSize,
      }),
      headers: { 'Authorization': 'Bearer ' + window.localStorage.getItem("token") },
      success: function (data) {
        if (data.code === 200) {
          // Do the special processing of paging 
          console.log(data)
          total = data.data.totalCount; // total 
          pades = data.data.totalPage; // Total number of pages 
          //isMore, When it's not the last page , by ture, If it's the last page , Then for false
          if (data.data.currPage < data.data.totalPage) {
            isMore = true;
          }
          if (data.data.currPage === data.data.totalPage) {
            isMore = false;
          }
          // If the total number ===0, Do the processing without data .
          if (data.data.totalCount == 0) {
            // You need to clear the data again and fill in 
            $("#allContent").empty();
            $("#allContent").append(" There is no content ");
          } else {
            for (var i = 0; i < data.data.list.length; i++) {                                      
               $("#allContent").append(strlistDom(data.data.list[i]))
            }
            // When the current page is the last page, add the prompt that all the loaded pages have been completed 
            if (data.data.currPage === data.data.totalPage) {
                $("#allContent").append("<div style='margin-top:0.2rem;margin-bottom:0.4rem;text-align:center;color: #999999;font-size:0.3rem;'> Data loaded </div>");
              }
          }
        }else {
          alertGlobal(data.message, 3000, true)
        }
      }
    });
  }

 （3） Test whether the interface has been connected

Open browser developer tools F12 stay network-XHR You can see that the request is 200, And two pieces of data are returned .

 （4） Display the data returned by the interface on the page .

We were just HTML False data is written in , But the data after getting the interface needs to be rendered to the page one by one , So we comment out the previous false data section , And add a id and class All for allContent Of Div So that we can render the data next .

<div class="allContent" id="allContent"></div>
<!-- <div class="noticeDiv">
    <div class="divTitle"> Title content content </div>
    <div class="divContent"  id="content" style="padding-right:0.4rem;">
         Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
    </div>
</div> -->

  Actually    $("#allContent").append(strlistDom(data.data.list[i]))  Is doing this thing 

 function strlistDom(data) {
    var str = "<div class='noticeDiv'>"+
      "<div class='divTitle'>"+ data.title + "</div>" +
      "<div class='divContent'  id='content' style='padding-right:0.4rem;'>" + data.content + "</div></div>"
    return str;
  }

  stay strListDom Function to splice part of the code just commented , And replace the text with Data fields returned by the interface .

append Is to render the data obtained every time to allContent In the middle

（5） Page scrolling page turning 

// When the scroll bar is rolling , Load data page by page 
  $(window).scroll(function () {
    $(".content_1").each(function () {
      var scrollTop = this.scrollTop || document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop + window.innerHeight + 20 >= this.offsetHeight) {
        if (isMore) {
          isMore = false;
          pageNum++;
          year = $("#yearInit").val() ? yearInitGlobal : $("#year").html();
          jidu = $("#jiduInit").val() ? quarterInitGlobal : getQuarterGlobal($("#jidu").html());
          getList(year, jidu, pageNum, pageSize)
        }
      }
    });
  });

  thus , We have completed this simple notification list function , Is it clear ！ The effect is as follows

  Next section , We will cover a slightly more complex function that includes queries , But it's much the same , The same way of thinking

【H5 Development 】 Take you through... From a simple page H5 Development ~ From the static page to the interface manual teaching, the whole page implementation process  https://blog.csdn.net/Sabrina_cc/article/details/119865234

【H5 Development 】02 Take you hand in hand to develop H5 List page ~ Contains the query 、 Reset 、 Submission function https://blog.csdn.net/Sabrina_cc/article/details/119888243

原网站

版权声明
本文为[Rachel]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202180530476645.html

边栏推荐

猜你喜欢

随机推荐