| | |
| | | v-if="showCatalogList.indexOf(6) > -1" |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | @Upload_initViewer="changeDomViewer" |
| | | /> |
| | | <chapterSix |
| | | v-if="showCatalogList.indexOf(7) > -1" |
| | |
| | | :showPageList="loadPageList" |
| | | :questionData="questionData" |
| | | @eventSwdt="swdtChange" |
| | | @Upload_initViewer="changeDomViewer" |
| | | /> |
| | | <chapterEight |
| | | v-if="showCatalogList.indexOf(9) > -1" |
| | |
| | | }, |
| | | mounted() { |
| | | // 默认加载章节 |
| | | this.showCatalogList = [6]; |
| | | this.showCatalogList = [1]; |
| | | // 滚动监听节流 |
| | | this.throttledScrollHandler = _.throttle( |
| | | this.scrollFun, |
| | |
| | | // }, 1000); |
| | | }, |
| | | methods: { |
| | | changeDomViewer(){ |
| | | setTimeout(() => { |
| | | this.initViewer() |
| | | }, 500); |
| | | }, |
| | | // 滚动监听 |
| | | scrollFun(event) { |
| | | // 判断向上滚动还是向下滚动 |
| | |
| | | initSwiper() { |
| | | const doms = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".swiper-container"); |
| | | ).querySelectorAll(".swiper-img"); |
| | | for (let i = 0; i < doms.length; i++) { |
| | | const dom = doms[i]; |
| | | new Swiper(dom, { |
| | |
| | | autoplay: { |
| | | //自动开始 |
| | | delay: 3000, //时间间隔 |
| | | disableOnInteraction: false, //*手动操作轮播图后不会暂停* |
| | | disableOnInteraction: false //*手动操作轮播图后不会暂停* |
| | | }, |
| | | paginationClickable: true, |
| | | slidesPerView: 1, // 一组三个 |
| | | spaceBetween: 30, // 间隔 |
| | | // 如果需要前进后退按钮 |
| | | navigation: { |
| | | nextEl: ".swiper-button-next", |
| | | prevEl: ".swiper-button-prev", |
| | | 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 |
| | | // // 如果需要分页器 |
| | | // pagination: { |
| | | // el: (this.container ? this.container : document).querySelector( |
| | | // ".swiper-pagination" |
| | | // ), |
| | | // clickable: true // 分页器可以点击 |
| | | // } |
| | | }); |
| | | } |
| | | const pptDoms = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".swiper_ppt"); |
| | | for (let i = 0; i < pptDoms.length; i++) { |
| | | 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" |
| | | ) |
| | | }, |
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
| | | observer: true, |
| | | observeParents: true, |
| | | // // 如果需要分页器 |
| | | // pagination: { |
| | | // el: ".swiper-pagination", |
| | | // clickable: 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; |
| | | }, |
| | | slideChange: (value) => { |
| | | let currentPage = value.activeIndex + 1; // 获取当前页(从1开始计数) |
| | | let totalPages = value.slides.length; // 获取总页数 |
| | | var paginationInfoEl = dom.querySelector(".pageBox"); |
| | | if (paginationInfoEl) |
| | | paginationInfoEl.textContent = currentPage + "/" + totalPages; |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | |
| | | for (let i = 0; i < doms.length; i++) { |
| | | const dom = doms[i]; |
| | | new Viewer(dom, { |
| | | container: this.container |
| | | ? this.container.querySelector("#app") |
| | | : "body", |
| | | navbar: true, // 显示导航栏 |
| | | toolbar: true, // 显示工具栏 |
| | | title: true, // 显示标题 |
| | | title: true // 显示标题 |
| | | }); |
| | | } |
| | | }, |