web前端練習2----實現列表功能
阿新 • • 發佈：2018-12-21
效果圖：
思路：
1 html+css 完成基本佈局
2 接收到上個頁面的資料，Ajax請求資料
3 js渲染資料
我把所有程式碼：html css js 都寫在了一個檔案裡 Listview1.html
<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>