Question

我在javascript中创建了一个轮播，通过使用页面滚动或单击按钮来显示多个内容。我为此目的使用了viewpager.js。我在底部添加了一个分页，单击按钮时可以正常工作。我无法弄清楚如何将其链接到页面滚动。任何帮助表示赞赏。我的代码：

HTML

<div id='prev'>
        <button id="btn-prev"><img src='img/orange-towards-left.png'></button>
    </div>
    <div class='pager'>
        <div class='pager_items' id='info'>              
         </div>
    </div>
    <div id='next'>
      <button id="btn-next"><img src='img/orange-towards-right.png'></button>
      </div>
      <div id='pagination'>
       <ul></ul>
      </div>

JS

item_container = document.querySelector('.pager_items');
   view_pager_elem = document.querySelector('.pager');
   w = view_pager_elem.getBoundingClientRect().width;
   items = payerAccArr.length;
   item_container.style.width = (items * 100)+ '%';
   var child_width = (100 / items) + '%';
   var html = "";
   document.getElementById('monthInfo').innerHTML=payerAccArr[0].DateKey + " Bill Amount ";
   for (var i = 0; i < items; i++) {
     html += "<div class=toggle><h4>Payer Account Name</h4> <ul> <li>" + payerAccArr[i].PayerAccountName + 
    "</li></ul> _______________ <ul><li> "+(payerAccArr[i].TotalAmount).toFixed(2) +
    "   USD</li> </ul></div>";
    }
    item_container.innerHTML = html;

    for(var i=0;i<items;i++)
      item_container.children[i].style.width = child_width;

    var htmlStr='<li class="current"></li>';
    for(var i=0;i<items-1;i++){
       htmlStr += '<li></li>';
    }
    $('#pagination ul').html(htmlStr);
    vp = new ViewPager(view_pager_elem, {
      pages: item_container.children.length,
      vertical: false,
      onPageScroll : function (scrollInfo) {
        offset = -scrollInfo.totalOffset;
        invalidateScroll();
      },
      onPageChange : function (page) {
    document.getElementById('monthInfo').innerHTML=payerAccArr[page].DateKey + " Bill Amount ";
     }
     });

     window.addEventListener('resize', function () {
       w = view_pager_elem.getBoundingClientRect().width;
       invalidateScroll();
     });
     document.getElementById('btn-prev').addEventListener('click', function (){
     vp.previous();
      if(index>0){
       createDoughnutChart(index--);
     }
     var li = jQuery("li.current");
     if (li.length){
       var $prev = li.prev();
       if($prev.length == 0) 
         $prev = $("#pagination li").last().addClass("current");    
        li.removeClass("current");
        $prev.addClass("current");
      }
    });

下一个按钮的类似代码也已写入。

Answer 1

这个问题已经解决了。我通过添加以下代码对onPageChange函数进行了更改。我现在能够将它链接到页面滚动和按钮。

<强> JS：

onPageChange : function (page) {
      document.getElementById('monthInfo').innerHTML=payerAccArr[page].DateKey + " Bill Amount ";
     // console.log('page', page);
     var li = $("li.current");
     var curIndex = li.index();

     if(li.length){
        var $prev = li.prev();
        var $next = li.next();

        if(page == $prev.index()){

          li.removeClass("current");
          $prev.addClass("current");
        }

        if(page==$next.index()){

          li.removeClass("current");
          $next.addClass("current");
        }
     }
    }

如何将分页链接到jquery中的pagescroll？

1 个答案: