轮播图和图片查看

YM

2024-05-29 4a876a152948cd153c4f8a4a86b49aee377bb9ac

 src/books/childHealth/view/content/index.vue

@@ -98,6 +98,10 @@
import _ from "lodash";
import getQuestionList from "@/assets/methods/examination";
import testData from "../../assets/examinationList";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  data() {
    return {
@@ -138,6 +142,14 @@
          this.initObservation();
          this.initThemeColor();
        }, 500);
      }
    },
    loadPageList: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
        }, 200);
      }
    }
  },
@@ -189,23 +201,23 @@
    }, 500);

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(5, 100);
    //   setTimeout(() => {
    //     this.renderSign("Note", {
    //       id: "2ACA9359",
    //       txt: "营养素和热量，才能",
    //       page: "100",
    //       type: "Highlight",
    //       color: "#F5E12A"
    //     });
    //     setTimeout(() => {
    //       this.delSign({
    //         ids: ["2ACA9359"]
    //       });
    //     }, 2000);
    //   }, 1000);
    // }, 3000);
    setTimeout(() => {
      this.gotoPage(1, 11);
      //   setTimeout(() => {
      //     this.renderSign("Note", {
      //       id: "2ACA9359",
      //       txt: "营养素和热量，才能",
      //       page: "100",
      //       type: "Highlight",
      //       color: "#F5E12A"
      //     });
      //     setTimeout(() => {
      //       this.delSign({
      //         ids: ["2ACA9359"]
      //       });
      //     }, 2000);
      //   }, 1000);
    }, 1000);
  },
  methods: {
    // 滚动监听
@@ -475,18 +487,18 @@
            "chapter"
          );
          const catalog = catalogDom.getAttribute("num");
          console.log(page, "page", catalog, "catalog",);
          let text = null
          if(target.querySelector('p')) {
            console.log(target.querySelector('p').textContent.substring(0, 20));
            text = target.querySelector('p').textContent.substring(0, 20)
          console.log(page, "page", catalog, "catalog");
          let text = null;
          if (target.querySelector("p")) {
            console.log(target.querySelector("p").textContent.substring(0, 20));
            text = target.querySelector("p").textContent.substring(0, 20);
          }
          // 返回页码和章节信息
          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
            this.$store.state.qiankun.pageChange({
              page: page,
              catalog: catalog,
              text,
              text
            });
          // const sections = Array.from(document.querySelectorAll(".section"));
          //sections：获取所有具有 .section 类名的元素，并转换为数组。
@@ -539,6 +551,51 @@
        }
      });
    },
    initSwiper() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".swiper-container");
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        new Swiper(dom, {
          loop: false, // 无缝
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable: true // 分页器可以点击
          }
        });
      }
    },
    initViewer() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".openImgBox");
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        new Viewer(dom, {
          navbar: true, // 显示导航栏
          toolbar: true, // 显示工具栏
          title: true // 显示标题
        });
      }
    }
  },
  components: {
    pageHeader,