drama优化

user1

2024-06-13 b83dfcd4b8c31b2ba07770157d5ef0aba828e72d

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

@@ -24,17 +24,23 @@
          :showPageList="loadPageList"
        >
        </chapterTwo>
        <chapterThree
        <!-- <chapterThree
        v-if="showCatalogList.indexOf(4) > -1"
          :showPageList="loadPageList"
        ></chapterThree>
        <chapterFour
        v-if="showCatalogList.indexOf(5) > -1"
          :showPageList="loadPageList"
        ></chapterFour>
        ></chapterFour> -->
       
      </div>
  
      <!-- 音频小窗播放组件 -->
      <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    ></miniAudio>
    </div>
  </template>
  
@@ -42,9 +48,10 @@
  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 chapterThree from "./chapter003.vue";
  // import chapterFour from "./chapter004.vue";
  import NoteIcon from "@/assets/images/biji.png";
  import miniAudio from "@/components/miniAudio/index.vue";
  import _ from "lodash";
  import Swiper from "swiper/bundle";
  import "swiper/swiper-bundle.css";
@@ -53,7 +60,7 @@
  export default {
    data() {
      return {
        catalogLength: 4, // 总章节数
        catalogLength: 3, // 总章节数
        showCatalogList: [], // 显示的章节
        loadThreshold: 300, // 触发加载阈值
        throttleThreshold: 100, // 节流阈值
@@ -65,6 +72,9 @@
        questionDataMap: {},
        renderSignMap: {},
        highlightData: null,
        audioPath: "",
      currentTime: null,
      videoList: [],
      };
    },
    computed: {
@@ -219,6 +229,7 @@
      scrollFun(event) {
        // 判断向上滚动还是向下滚动
        if (event.target.scrollTop > this.previousScrollTop) {
          this.getAduio();
          // 向下
          const currentScrollTop =
            event.target.scrollTop + event.target.offsetHeight;
@@ -243,6 +254,7 @@
          }
        } else if (event.target.scrollTop < this.previousScrollTop) {
          // 向上
          this.handleAudio();
          const currentScrollTop = event.target.scrollTop;
          if (currentScrollTop <= this.loadThreshold) {
            // 到达阈值
@@ -722,10 +734,9 @@
          pageHeader,
          chapterOne,
          chapterTwo,
          chapterThree,
          chapterFour,
          chapterFive,
          chapterSix,
          // chapterThree,
          // chapterFour,
   
        };
        // 遍历所有章节文件
        for (const key in pageData) {
@@ -824,13 +835,64 @@
        // 跳转
        this.gotoPage(data.catalog, data.page, () => {});
      },
          // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      this.videoList = allVideo;
      if (allVideo.length) {
        // 查找播放状态的最后一条音频
        const playAudio = allVideo
          .reverse()
          .find((item) => item.paused == false);
        if (playAudio) {
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap < 0) {
            playAudio.pause();
            this.audioPath = playAudio.src;
            this.currentTime = playAudio.currentTime;
          }
        }
      }
    },
    // 页面向上滚动，音频小窗回收
    handleAudio() {
      if (!this.audioPath) return false;
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if (allVideo.length) {
        //查找与小窗播放音频同源的页面audio DOM
        const playAudio = allVideo.find((item) => item.src == this.audioPath);
        if (playAudio) {
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap >= 0) {
            if (this.$refs.audioPlayer) {
              const playerState = this.$refs.audioPlayer.getVideoPlayer();
              this.audioPath = "";
              playAudio.currentTime = playerState.currentTime;
              if (!playerState.paused) playAudio.play();
            }
          }
        }
      }
    },
    // 关闭mini video
    closeMiniAudio() {
      this.audioPath = "";
    },
    },
    components: {
      pageHeader,
      chapterOne,
      chapterTwo,
      chapterThree,
      chapterFour,
      miniAudio
      // chapterThree,
      // chapterFour,
      
    },
  };
  </script>