From 72f8190d33b5e6f1b64b848048f315cf530bc6ef Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期五, 31 五月 2024 17:18:05 +0800 Subject: [PATCH] 艺术分页 --- src/books/English/view/components/index.vue | 66 +++++++++++++++++--------------- 1 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue index 13bc3b7..a8700d0 100644 --- a/src/books/English/view/components/index.vue +++ b/src/books/English/view/components/index.vue @@ -33,7 +33,7 @@ export default { data() { return { - catalogLength: 13, // 鎬荤珷鑺傛暟 + catalogLength: 2, // 鎬荤珷鑺傛暟 showCatalogList: [], // 鏄剧ず鐨勭珷鑺� loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝�� throttleThreshold: 100, // 鑺傛祦闃堝�� @@ -559,42 +559,46 @@ // } }); } - // swiper-container const pptDoms = ( this.container ? this.container : document - ).querySelectorAll(".swiper-ppt"); + ).querySelectorAll(".swiper_ppt"); for (let i = 0; i < pptDoms.length; i++) { - debugger const dom = pptDoms[i]; new Swiper(dom, { - loop: false, // 鏃犵紳 - autoplay: false, - paginationClickable: true, - slidesPerView: 1, // 涓�缁勪笁涓� - spaceBetween: 30, // 闂撮殧 - // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳 - navigation: { - nextEl: (this.container ? this.container : document).querySelector( - ".swiper-button-next" - ), - prevEl: (this.container ? this.container : document).querySelector( - ".swiper-button-prev" - ) + loop: false, // 鏃犵紳 + autoplay: false, + paginationClickable: true, + slidesPerView: 1, // 涓�缁勪笁涓� + spaceBetween: 30, // 闂撮殧 + // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳 + navigation: { + nextEl: (this.container ? this.container : document).querySelector( + ".swiper-button-next" + ), + prevEl: (this.container ? this.container : document).querySelector( + ".swiper-button-prev" + ), + }, + // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� + observer: true, + observeParents: true, + on: { + init:(value) => { + let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級 + let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁� + var paginationInfoEl = dom.querySelector('.pageBox'); + if(paginationInfoEl) + paginationInfoEl.textContent = currentPage + '/' + totalPages; }, - // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� - observer: true, - observeParents: true, - on:{ - slideChangeTransitionStart:function (value) { - // 姣忓綋婊戝潡鏀瑰彉鏃惰Е鍙戯紝鏇存柊褰撳墠椤靛拰鎬婚〉鏁扮殑鏄剧ず - let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級 - let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁� - var paginationInfoEl = document.querySelector('.pagination-info'); - paginationInfoEl.textContent = currentPage + '/' + totalPages; - } - } - }); - + slideChange:(value) => { + let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級 + let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁� + var paginationInfoEl = dom.querySelector('.pageBox'); + if(paginationInfoEl) + paginationInfoEl.textContent = currentPage + '/' + totalPages; + }, + }, + }); } }, initViewer() { -- Gitblit v1.9.1