数字教材框架
parent: 9b55b510 | 补丁 | 提交 | ignore whitespace
闫增涛
2024-05-14 3910f9a005467ce64cb0ca1ab82adb91493a9d82 
分页
7个文件已修改
9118 ■■■■■ 已修改文件
package.json 1 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/index.html 4 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/App.vue 11 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/childHealth/assets/main.less 10 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/childHealth/view/content/components/chapter0004.vue 1 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/childHealth/view/content/index.vue 117 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
yarn.lock 8974 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 package.json


@@ -11,6 +11,7 @@


    "axios": "^1.6.8",


    "core-js": "^3.8.3",


    "element-ui": "^2.15.14",


    "lodash": "^4.17.21",


    "moment": "^2.30.1",


    "qiankun": "^2.10.16",


    "spark-md5": "^3.0.2",




 public/index.html


@@ -1,12 +1,12 @@


<!DOCTYPE html>


<html lang="">


<html lang="zh-cn">


  <head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <meta name="viewport" content="width=device-width,initial-scale=1.0">


    <meta http-equiv="Cache-Control" content="no-cache">


    <link rel="icon" href="<%= BASE_URL %>favicon.ico">


    <title><%= htmlWebpackPlugin.options.title %></title>


    <title>数字教材</title>


  </head>


  <body>


    <noscript>




 src/App.vue


@@ -19,10 +19,13 @@


</script>




<style lang="less">


  html,body{


    width: 100%;


    height: 100%;


    margin: 0;


  }


  #app {


    max-width: 816px;


    min-width: 375px;


    margin: 0 auto;


    padding-bottom: 100px;


    width: 100%;


    height: 100%;


  }


</style>




 src/books/childHealth/assets/main.less


@@ -1,4 +1,6 @@


.temp-book {


  width: 100%;


  height: 100%;


  font-family: "宋体", SimSun, sans-serif;


  .custom_tag {


    background-color: #1eb9ee;


@@ -544,9 +546,9 @@


  }


  .dl-bl {


    display: inline-block;


  } 


  }


  .mt-10 {


    margin-top:10px


    margin-top: 10px;


  }


  .w100 {


    width: 100% !important;


@@ -555,7 +557,7 @@


    color: #15c0f2;


  }


  .video-border {


    border:1px dotted #15c0f2


    border: 1px dotted #15c0f2;


  }


  .fm-st {


    font-family: "STKaiti";


@@ -565,7 +567,7 @@


    width: 30px;


  }


  .table-br-color {


    border-color:#e9e9e9


    border-color: #e9e9e9;


  }


  .span-border {


    margin-left: -13px;




 src/books/childHealth/view/content/components/chapter0004.vue


@@ -1186,7 +1186,6 @@


import oddHeader from "../../components/pageHeader/oddHeader.vue";


export default {


  components: { evenHeader, oddHeader },


  name: "temp-book",


  data() {


    return {


      learn: require("../../../assets/images/chapterFour/0094-1.jpg"),




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


@@ -1,19 +1,24 @@


<template>


  <div class="page-content">


    <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader>


    <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>


    <chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo>


    <chapterThree v-if="showCatalogList.indexOf(3) > -1"></chapterThree>


    <chapterFour v-if="showCatalogList.indexOf(4) > -1"></chapterFour>


    <chapterFive v-if="showCatalogList.indexOf(5) > -1"></chapterFive>


    <chapterSix v-if="showCatalogList.indexOf(6) > -1"></chapterSix>


    <chapterSeven v-if="showCatalogList.indexOf(7) > -1"></chapterSeven>


    <chapterEight v-if="showCatalogList.indexOf(8) > -1"></chapterEight>


    <chapterNine v-if="showCatalogList.indexOf(9) > -1"></chapterNine>


    <chapterTen v-if="showCatalogList.indexOf(10) > -1"></chapterTen>


    <chapterEleven v-if="showCatalogList.indexOf(11) > -1"></chapterEleven>


    <chapterTwelve v-if="showCatalogList.indexOf(12) > -1"></chapterTwelve>


    <chapterThirteen v-if="showCatalogList.indexOf(13) > -1"></chapterThirteen>


  <div class="page-main" @scroll="throttledScrollHandler">


    <div class="page-content">


      <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader>


      <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>


      <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>


      <chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo>


      <chapterThree v-if="showCatalogList.indexOf(3) > -1"></chapterThree>


      <chapterFour v-if="showCatalogList.indexOf(4) > -1"></chapterFour>


      <chapterFive v-if="showCatalogList.indexOf(5) > -1"></chapterFive>


      <chapterSix v-if="showCatalogList.indexOf(6) > -1"></chapterSix>


      <chapterSeven v-if="showCatalogList.indexOf(7) > -1"></chapterSeven>


      <chapterEight v-if="showCatalogList.indexOf(8) > -1"></chapterEight>


      <chapterNine v-if="showCatalogList.indexOf(9) > -1"></chapterNine>


      <chapterTen v-if="showCatalogList.indexOf(10) > -1"></chapterTen>


      <chapterEleven v-if="showCatalogList.indexOf(11) > -1"></chapterEleven>


      <chapterTwelve v-if="showCatalogList.indexOf(12) > -1"></chapterTwelve>


      <chapterThirteen


        v-if="showCatalogList.indexOf(13) > -1"


      ></chapterThirteen>


    </div>


  </div>


</template>




@@ -33,18 +38,76 @@


import chapterTwelve from "./components/chapter012.vue";


import chapterThirteen from "./components/chapter013.vue";




import _ from "lodash";




export default {


  name: "temp-book",


  data() {


    return {


      catalogLength: 13,


      showCatalogList: []


      catalogLength: 13, // 总章节数


      showCatalogList: [], // 显示的章节


      loadThreshold: 300, // 触发加载阈值


      throttleThreshold: 100, // 节流阈值


      previousScrollTop: 0,


      throttledScrollHandler: null


    };


  },


  mounted() {


    this.showCatalogList = [1];


    // 默认加载章节


    this.showCatalogList = [0];


    // 滚动监听节流


    this.throttledScrollHandler = _.throttle(


      this.scrollFun,


      this.throttleThreshold,


      { leading: true, trailing: false }


    );


  },


  methods: {},


  methods: {


    scrollFun(e) {




      // 判断向上滚动还是向下滚动


      if (event.target.scrollTop > this.previousScrollTop) {


        console.log("向下滚动");


        const currentScrollTop =


          event.target.scrollTop + event.target.offsetHeight;


        if (


          currentScrollTop >=


          event.target.scrollHeight - this.loadThreshold


        ) {


          // 到达阈值


          if (


            this.showCatalogList[this.showCatalogList.length - 1] <


            this.catalogLength


          ) {


            // 加载下一章


            this.showCatalogList.push(


              this.showCatalogList[this.showCatalogList.length - 1] + 1


            );


            if (this.showCatalogList.length > 3) {


              // 超过三章隐藏顶部一章


              this.showCatalogList.shift();


            }


          }


        }


      } else if (event.target.scrollTop < this.previousScrollTop) {


        console.log("向上滚动");


        const currentScrollTop = event.target.scrollTop;


        if (currentScrollTop <= this.loadThreshold) {


          // 到达阈值


          if (this.showCatalogList[0] > 0) {


            // 加载上一章


            this.showCatalogList.unshift(this.showCatalogList[0] - 1);


            if (this.showCatalogList.length > 3) {


              // 超过三章隐藏底部一章


              this.showCatalogList.pop();


            }


          }


        }


      }


      console.log(this.showCatalogList);


      // 更新上一次滚动的位置


      this.previousScrollTop = event.target.scrollTop;


    }


  },


  components: {


    pageHeader,


    chapterOne,


@@ -64,4 +127,16 @@


};


</script>




<style lang="less" scoped></style>


<style lang="less" scoped>


.page-main {


  width: 100%;


  height: 100%;


  overflow: auto;


  .page-content {


    max-width: 816px;


    min-width: 375px;


    margin: 0 auto;


    padding-bottom: 100px;


  }


}


</style>




 yarn.lock


Diff too large