【H5开发】01从一个简单页面带你体验H5开发 ~ 从静态页面到调接口手把手教学整个页面实现过程

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

４. 对照UI设计稿修改样式

• {

margin: 0;

padding: 0;

text-decoration: none;

}

body {

font-size: 10px;

-webkit-text-size-adjust: none;

background-color: #f4f4f4 !important;

font-family: ‘微软雅黑’;

}

.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. 功能实现

对照接口可以看到，我们请求是POST方法，请求数据包含 pageNum和pageSize，而获取到的数据很多，我们可以只使用title content即可。

（1）定义全局变量

var pageNum = 1; //默认是从第一页开始访问

var pageSize = pageSizeGlobal; //默认一页访问的条数

var isMore = false; //控制翻页

getList(pageNum, pageSize);

（2） 编写方法，获取页面初始数据：

// 获取数据列表函数

function getList(pageNum, pageSize) {

console.log(“getlist”)

$.ajax({

type: “post”,

url: urlGlobal + “/api/h5/sys/notice/self/page”,

async: true,

dataType: “json”,//后台返回值类型

contentType: “application/json;charset=utf-8”, //如果提交的是json数据类型，则必须有此参数,表示提交的数据类型

async: false,//异步请求

data: JSON.stringify({

pageNum: pageNum,

pageSize: pageSize,

}),

headers: { ‘Authorization’: 'Bearer ’ + window.localStorage.getItem(“token”) },

success: function (data) {

if (data.code === 200) {

//做分页的特殊处理

console.log(data)

total = data.data.totalCount; //总

pades = data.data.totalPage; //总页数

//isMore,当不是最后一页的时候，为ture,若是最后一页，则为false

if (data.data.currPage < data.data.totalPage) {

isMore = true;

}

if (data.data.currPage === data.data.totalPage) {

isMore = false;

}

//如果总个数===0，做暂无数据的处理。

if (data.data.totalCount == 0) {

//需要重新清空数据再填入

$(“#allContent”).empty();

$(“#allContent”).append(“暂无内容”);

} else {

for (var i = 0; i < data.data.list.length; i++) {

$(“#allContent”).append(strlistDom(data.data.list[i]))

}

//当前是最后一页的时候增加全部加载完毕的提示语

if (data.data.currPage === data.data.totalPage) {

$(“#allContent”).append(“

数据加载完毕

”);

}

}

}else {

alertGlobal(data.message, 3000, true)

}

}

});

}

（3）测试接口是否已通

打开浏览器开发者工具F12在network-XHR可以看到请求情况为200，并且返回了两条数据。

（4）将接口返回的数据显示到页面上。

我们刚才在HTML中写死了假数据，但是拿到接口后的数据需要逐条渲染到页面上面，因此我们注释掉之前的假数据部分，并添加一个id和class都为allContent的Div方便我们接下来渲染数据。