快递查询

最新推荐文章于 2023-01-30 13:24:08 发布

ice_bear-

最新推荐文章于 2023-01-30 13:24:08 发布

阅读量586

点赞数 1

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/102522933

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

实现效果

在这里插入图片描述

问题

在添加历史信息时设置了 overflow-y：scroll仍然不能显示全部数据信息；
首先页面结构为：

如果给下半部分history的百分比高度加上now的百分比高度刚好等于父容器的高度就会出现这个问题

给history的百分比给小一些就能显示完整内容

如果多次点击查询按钮，内容会累加，所以在每次添加内容前要将之前元素清空

代码实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=400,maximum-scale=3.0,minimum-scale=0.5,user-scalable=no">
    <title>快递查询</title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div class="block">
    <div class="user">
        请输入订单号查询： <input type="text"/>
        <button>查询</button>
    </div>
    <div class="show">
        &nbsp;&nbsp;当前位置
        <div class="now"></div>
        &nbsp;&nbsp;历史位置信息
        <div class="history">
        </div>
    </div>
</div>
</body>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/index.js"></script>
<script>
    /*测试订单号：75177200055417     */
    $(function () {
        var str;
        $("button").click(function () {
            str = $("input").val();
            $.ajax({
                method: "post",
                url: "https://api.jisuapi.com/express/query",
                data: {appkey: "4e0d297e5db837b9", type: "auto", number: str},
                dataType: "jsonp",
                success: function (res) {
                    console.log(res);
                    if (res.status != 0) {
                        alert(res.msg);
                        return;
                    }
                    var data = res.result;
                    /*当前位置信息*/
                    $(".now").html("");
                    var timer = $("<span></span>");
                    timer.html(data.list[0].time);
                    var nowPos = $("<span></span>");
                    nowPos.html(data.list[0].status);
                    $(".now").append(timer);
                    $(".now").append(nowPos);
                    /*物流状态*/
                    var s = data.deliverystatus;
                    var aContent = $("<a></a>");
                    if (s == 1) {
                        aContent.html("状态信息：在途中");
                    } else if (s == 2) {
                        aContent.html("状态信息：派件中");
                    } else if (s == 3) {
                        aContent.html("状态信息：已签收");
                    } else if (s == 4) {
                        aContent.html("状态信息：派件失败（拒签等）");
                    }
                    $(".now").append(aContent);
                    /*历史位置信息*/
                    $(".history").html("");
                    for (var i = 1; i < data.list.length; i++) {
                        var d = $("<div></div>");
                        d.html("时间：" + data.list[i].time + " " + data.list[i].status + " ");
                        $(".history").append(d);
                    }
                }
            });
        });
    });
</script>
</html>

css样式

*{
    margin:0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.block{
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffebd0;
}
.user{
    padding: 30px;
    width: 100%;
    height: 10%;
    border-bottom: 1px solid #af9fff;
}
.user input{
    width: 250px;
    height: 30px;
    border: 1px solid #acacac;
    padding-left: 10px;
    margin-top: 10px;
}
button{
    width: 50px;
    height: 30px;
}
.show{
    width: 100%;
    height: 90%;
    background: #ffe2ea;
}
.now{
    width: 100%;
    height: 40%;
    border-bottom: 1px solid #af9fff;
}
.now span{
    width: 100%;
    height: auto;
    display: inline-block;
    padding: 5px;
}
.now a{
    padding: 5px;
    width: 100%;
    height: auto;
    display: inline-block;
}
.history{
    width: 100%;
    height:40%;
    overflow-y: scroll;
}
.history div{
    padding: 10px;
    border-bottom: 1px solid #af9fff;
}