1. 程式人生 > >web前端練習2----實現列表功能

web前端練習2----實現列表功能

效果圖:
在這裡插入圖片描述
思路:
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>