js中的分页导航

最新推荐文章于 2024-07-01 11:34:43 发布
liantaiyou
最新推荐文章于 2024-07-01 11:34:43 发布
阅读量173
点赞数
文章标签： js
本文链接：https://blog.youkuaiyun.com/liantaiyou/article/details/103671186
版权
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    
    .pagWarp {
        height: 40px;
        box-shadow: 0 2px 5px #b6b6b6;
        position: absolute;
        border-radius: 2px;
        right: 42%;
        top: 430px;
    }
    
    #btnL,
    #btnR {
        line-height: 40px;
        cursor: pointer;
    }
    
    #btnL {
        float: left;
    }
    
    #btnR {
        float: right;
    }
    
    .pagWarp ul {
        height: 40px;
        margin: 0 auto;
        float: left;
        text-align: center;
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .pagWarp ul li {
        float: left;
        text-align: center;
        line-height: 40px;
        padding: 0 4px;
    }
    
    .active {
        color: blue;
        font-size: 30px;
    }
    /* 商品列表样式 */
    
    .list {
        width: 80%;
        margin: 20px auto;
    }
    
    .list:after {
        content: '';
        display: block;
        clear: both;
    }
    
    .list li {
        padding: 2%;
        width: 15%;
        float: left;
        height: 300px;
        color: #666;
        border-right: 1px solid #b6b6b6;
        box-shadow: 2px 2px 5px #b6b6b6;
        margin-left: 8px;
        margin-top: 20px;
    }
    
    .list li h2 {
        font-size: 18px;
        text-align: center;
        line-height: 30px;
    }
    
    .list .img {
        width: 100%;
        border: 1px solid #b6b6b6;
        height: 180px;
    }
    
    .list input[type=button] {
        display: block;
        margin: 0 auto;
        border: 1px solid #b6b6b6;
        width: 100px;
        height: 80px;
    }
</style>

<body>
    <ul class="list" id="list">
        <!-- 放json中的商品数据 -->
    </ul>
    <div class="pagWarp" id="pageWarp">
        <li id="btnL">上一页</li>
        <ul>
            <!-- //放页码 -->
        </ul>
        <li id="btnR">下一页</li>
    </div>
</body>
<script src="ajax.js"></script>
<script>
    class Page {
        constructor() {
            this.list = document.getElementById("list");
            this.left = document.getElementById("btnL");
            this.right = document.getElementById("btnR");
            this.pageCont = document.querySelector("#pageWarp ul");

            this.num = 5;
            this.index = 0;
            this.url = "http://localhost/19-12-23/page/goods.json";

            this.load();
            this.addEvent();
        }
        load() {
            // ajax请求数据
            var that = this;
            ajaxGet(this.url, function(res) {
                //将接收到的json文件转成对象，是数组里面放对象的格式，有利于遍历
                // 数组拿到所有值
                // console.log(res);
                that.res = JSON.parse(res);
                // console.log(that.res);
                // 请求成功之后渲染页面创建页码

                that.display();
                // 需要看有多少数据，在决定有多少页
                that.createPage();
            });
        }
        display() {
            var str = "";
            // 0-this.num-1
            for (var i = this.index * this.num; i < this.index * this.num + this.num; i++) {
                if (i < this.res.length) {
                    str += `<li>
                    <img src="${this.res[i].url}" alt="" class="img">
                    <h2>商品名称：<span>${this.res[i].name}</span></h2>
                    <h2>商品介绍：<span>${this.res[i].tip}</span></h2>
                    <h2>商品价格：<span>${this.res[i].price}</span></h2>
                    </li>
                    `
                }
            }
            this.list.innerHTML = str;
        }
        createPage() {
            this.maxNum = Math.ceil(this.res.length / this.num);
            var str = "";
            for (var i = 0; i < this.maxNum; i++) {
                str += `<li index="${i}">${i+1}</li>`

            }
            this.pageCont.innerHTML = str;

            this.setActive();
        }
        setActive() {
            var li = this.pageCont.children;
            for (var i = 0; i < li.length; i++) {
                li[i].className = "";
            }
            li[this.index].className = "active";
        }
        addEvent() {
            var that = this;
            this.left.onclick = function() {
                if (that.index == 0) {
                    that.index = that.maxNum - 1;
                } else {
                    that.index--;
                }
                that.setActive();
                that.display();
            }
            this.right.onclick = function() {
                if (that.index == that.maxNum - 1) {
                    that.index = 0;
                } else {
                    that.index++

                }
                that.setActive();
                that.display();
            }
            this.pageCont.onclick = function(eve) {
                if (eve.target.nodeName == "LI") {
                    that.index = eve.target.getAttribute("index");
                    that.setActive(); //渲染页码的当前项
                    that.display();
                }
            }
        }
    }




    new Page();
</script>

</html>