Question

我有从后端创建的项目，我没有确切的值，必须从项目的起始数量创建项目的分页。如果有16个itens，那么分页是：1 - 2 - 3 - 4

另一个问题是滚动，需要根据你的页码来上升或下降。

$('.pagination .page1').on('click', function(e){
     event.preventDefault();
     $('.container').animate({
         scrollTop: '-=185'
     });
});

$('.pagination .page2').on('click', function(e){
     event.preventDefault();
     $('.container').animate({
         scrollTop: '+=185'
     });
});

Answer 1

我创建了一个更通用的寻呼机：

＆＃13;

$('.pagination li').on('click', function (e) {
    event.preventDefault();
    var container = $(this).parent().prev();
    var pagerNum = parseInt($(this).text()) > 1 ? parseInt($(this).text()) : 0;
    var scrollTo = $('.item').eq((pagerNum * pagerNum));
    $(this).parent().prev().animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
    });
});

＆＃13;

.container {
    background: red;
    width: 300px;
    height: 185px;
    overflow: hidden;
}
.item {
    width: 100%;
    background: blue;
    height: 40px;
    margin: 5px 0;
}
ul {
    padding: 0;
    margin: 0;
    width: 300px;
    text-align: center;
}
ul li {
    display: inline-block;
    list-style-type: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
    <div class="item">item10</div>
    <div class="item">item11</div>
    <div class="item">item12</div>
</div>
<ul class="pagination">
    <li><a href="#" class="page1">1</a>

    </li>
    <li><a href="#" class="page2">2</a>

    </li>
    <li><a href="#" class="page3">3</a>

    </li>
</ul>

＆＃13;

从创建的项目开始创建分页号码

1 个答案: