舞蹈分页

闫增涛

2024-06-05 3fb594dc317848107fd7bbb51631cfb763c19f5f

 src/books/artAndDance/view/components/index.vue

@@ -17,13 +17,40 @@
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
      >
      </chapterTwo>
      <chapterThree
      v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
      v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
      <chapterFive
      v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
      ></chapterSix>
    </div>

  </div>
</template>

<script>
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";
import chapterThree from "./chapter003.vue"
import chapterFour from './chapter004.vue'
import chapterFive from './chapter005.vue'
import chapterSix from './chapter006.vue'
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
@@ -33,7 +60,7 @@
export default {
  data() {
    return {
      catalogLength: 2, // 总章节数
      catalogLength: 7, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -565,40 +592,40 @@
      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,
        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;
          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"
            ),
          },
          slideChange:(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: {
            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;
            },
          },
        },
      });
        });
      }
    },
    initViewer() {
@@ -622,7 +649,7 @@
      console.log("生僻字", event, word);
      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
        this.$store.state.qiankun.chooseWords({
          type:"word",
          type: "word",
          word,
          x: event.pageX,
          y: event.pageY,
@@ -634,6 +661,11 @@
  components: {
    pageHeader,
    chapterOne,
    chapterTwo,
    chapterThree,
    chapterFour,
    chapterFive,
    chapterSix
  },
};
</script>