<html>
<head lang="en">
<meta charset="UTF-8">
<!--手机上运行时，加上这句话-->
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<!--
display: block; ----设置为块级元素
display: inline; -----设置为内联元素
-->
<title>网页实现listView</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<!-- css样式-->
<style>
* {
margin: 0px;
padding: 0px;
}
/* 固定定位，就是固定下来，并且浮起来
* position: fixed; 绝对定位
* left:0; 距离左边0
* top:0; 距离上边0
* width: 100%; 宽度铺满
*/
.title {
/*
* 里面的文字居中
*/
line-height: 50px;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: cornflowerblue;
color: #fff;
font-size: 20px;
}
.imgid {
width: 85px;
height: 85px;
border: 1px solid #CCCCCC;
}
.divid {
padding-top: 60px;
}
.divid1 {
float: left;
}
.divid2 {
float: left;
}
.divid3 {
margin-left: 10px;
margin-top: 15px;
width: 270px;
font-size: 15px;
}
.divid4 {
margin-left: 10px;
margin-top: 20px;
color: red;
}
/*
* 清除浮动
* clear: both;
*/
.line {
height: 1px;
width: auto;
clear: both;
background-color: #CCCCCC;
}
/*
* overflow: hidden； 在浮动的父元素上,清除浮动
*/
.list {
overflow: hidden;
/*
* 用第边框，表示分割线
*/
border-bottom: solid 0.5px #ccc;
}
/*
* 用第边框，表示分割线
* z-index 属性设置元素的堆叠顺序,值越大，越浮在上面,默认是0
*/
.left{
position: fixed;
margin-top: 0px;
margin-left: 5px;
line-height: 50px;
text-align: center;
color: #fff;
z-index: 1;
}
</style>
</head>
<!--内容-->
<body>
<div class="title">商品列表</div>
<div class="left" onclick="back()">返回</div>
<!--列表-->
<div class="divid" id="root">
</div>
<!--在这里写js代码-->
<script>
// 函数调用
httpdata();
function httpdata() {
// 拿到上个页面传过来的数据
var locArray = location.href.split("=");
// 返回拿到的数组
var shuzu;
// 请求路径
var url = '/api2/product/mobile/getProductList?prodType=1&catalogId=1&fuzzyName=&page=1&rows=20';
//url: '/api/openapi.do?keyfrom=wojiaozhh&key=1770085291&type=data&doctype=json&version=1.1&q=good',//请求的url地址
//http://gcgl.5ulm.cn/product/mobile/getProductList?prodType=1&catalogId=1&fuzzyName=&page=1&rows=20
$.ajax({
url: url,
type: 'get',//设置请求的http方式，method也可以
dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Authorization", locArray[1]);
},
success: function (data, textStatus, jqXHR) {//请求成功之后执行的回调函数
// 打印数据
console.log(data);
// 成功码
var code = data.resultCode;
if (code != 200) {
return;
}
// 数组
shuzu = data.resultValue;
for (var i = 0; i < shuzu.length; i++) {
//document.write(
var html =
// 条目点击事件
"<div class='list' onclick=\"dianji('" + shuzu[i].productId + "','" + i + "')\">"
// 图片
+ "<div class='divid1'>"
+ "<img class='imgid' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542098238307&di=57d653de5bd7a1f18cc0361cbfff2fdc&imgtype=0&src=http%3A%2F%2Fimg5.gomein.net.cn%2FdescImg%2F201203%2Fdesc271%2F1000100060%2F55_01.jpg'>"
+ "</div>"
// 属性
+ "<div class='divid2'>"
+ "<div class='divid3'>" + shuzu[i].productName + "</div>"
+ "<div class='divid4'>" + "￥" + shuzu[i].dPrice + "</div>"
+ "</div>"
+ "</div>";
$("#root").append(html);
}
},
error: function (jqXHR, textStatus, errorThrown) {//请求失败之后执行的回调函数
document.write("报错了")
}
});
}
/**
* 点击事件的方法
* @param argument
*/
function dianji(argument, i) {
// 跳转并传递数据
alert("条目点击"+argument+">>>"+i);
}
/**
* 返回函数
*/
function back(){
window.location.href = document.referrer;
window.history.back(-1);
}
</script>
</body>
</html>
web前端实现登录，列表等功能
需积分: 40 14 浏览量
2018-11-15
15:08:04
上传
评论 1
收藏 83KB ZIP 举报
(h5源码).zip （22个子文件） 
(h5源码) MyListView1 .idea 
misc.xml 963B compiler.xml 686B workspace.xml 32KB html 
Login.html 4KB Listview1.html 6KB jquery-2.1.4.min.js 82KB .name 11B modules.xml 262B copyright profiles_settings.xml 76B vcs.xml 164B MyListView1.iml 296B Listdemo0 .idea misc.xml 963B compiler.xml 686B uiDesigner.xml 9KB workspace.xml 29KB .name 9B modules.xml 258B copyright profiles_settings.xml 76B css Listview1.html 3KB jquery-2.1.4.min.js 82KB vcs.xml 164B Listdemo2.iml 296B资源评论
