Widget:Vertical

<style> .btn_goTodayView {background: url(https://ssl.nexon.com/s2/game/kurtzpel/site/common/btns/btn_goTodayView.png) no-repeat;} .sy-down {background-image: url(https://patchwiki.biligame.com/images/grandchase/3/3c/7kcoszcozlonl1evxghbzb0moncrjpv.png);} .sy-up{background-image: url(https://patchwiki.biligame.com/images/grandchase/3/3c/7kcoszcozlonl1evxghbzb0moncrjpv.png);} </style> <script> // 获取元素 const content = document.querySelector('.sy-content'); const pagesContainer = document.querySelector('.sy-pages'); const up = document.querySelector('.sy-up'); const down = document.querySelector('.sy-down');

// 初始化数据 let currentIndex = 0; let currentPage = 0; const rowHeight = 108; const rowCount = content.children.length; const maxIndex = rowCount - 1; const maxPage = Math.floor(maxIndex / 3);

// 生成分页器 for (let i = 0; i <= maxPage; i++) {

 const page = document.createElement('div');
 page.classList.add('sy-page');
 if (i === 0) {
   page.classList.add('sy-active');
 }
 pagesContainer.appendChild(page);

}

// 分页器点击事件 const pages = document.querySelectorAll('.sy-page'); pages.forEach((page, index) => {

 page.addEventListener('click', () => {
   if (index !== currentPage) {
     currentPage = index;
     currentIndex = currentPage * 3;
     content.style.transform = `translate3d(0px, -${currentIndex * rowHeight}px, 0px)`;
     updatePages();
     updateButtons();
   }
 });

});

// 上下按钮点击事件 up.addEventListener('click', () => {

 if (currentIndex > 0) {
   currentIndex--;
   currentPage = Math.floor(currentIndex / 3);
   content.style.transform = `translate3d(0px, -${currentIndex * rowHeight}px, 0px)`;
   updatePages();
   updateButtons();
 }

});

down.addEventListener('click', () => {

 if (currentIndex < maxIndex) {
   currentIndex++;
   currentPage = Math.floor(currentIndex / 3);
   content.style.transform = `translate3d(0px, -${currentIndex * rowHeight}px, 0px)`;
   updatePages();
   updateButtons();
 }

});

// 更新分页器样式 function updatePages() {

 pages.forEach((page, index) => {
   if (index === currentPage) {
     page.classList.add('sy-active');
   } else {
     page.classList.remove('sy-active');
   }
 });

}

// 更新上下按钮样式 function updateButtons() {

 if (currentIndex === 0) {
   up.classList.add('disabled');
 } else {
   up.classList.remove('disabled');
 }
 if (currentIndex >= maxIndex - 2) {
   down.classList.add('disabled');
 } else {
   down.classList.remove('disabled');
 }

}

// 初始更新按钮样式 updateButtons(); </script>