admin

12_vuecli/mediaapp/src/views/book/BookPage.vue

@@ -3,6 +3,11 @@
         <h1>Book</h1>
     </div>
 </template>
+<style scoped>
+    .book-container{
+        height: 1000vh;
+    }
+</style>
 <script>
 export default {
     // beforeRouteEnter (to, from, next) {

12_vuecli/mediaapp/src/views/tv/TvPage.vue

@@ -1,150 +1,178 @@
 <template>
-    <div class="tv-container">
-        <div class="tv-list">
-            <div class="tv-item" v-for="item in dataList" :key="item.id">
-                <div class="tv-img">
-                    <div class="left-img">
-                        <img :src="'https://images.weserv.nl/?url='+item.pic.normal" alt="">
-                    </div>
-                    <div class="right-img">
-                        <img :src="'https://images.weserv.nl/?url='+item.photos[0]" alt="" srcset="">
-                    </div>
-                </div>
-                <div class="tv-info">
-                    <div class="info-left">
-                        <div class="tv-title">{{item.title}}({{item.year}})</div>
-                        <div class="tv-rate">
-                            <TvRate :val="item.rating"></TvRate>
-                        </div>
-                        <div class="tv-int"> {{item.card_subtitle}} </div>
-                    </div>
-                    <div class="info-right">
-                        <i class="iconfont icon-xiangkan"></i>
-                    </div>
-                </div>
-                <div class="tv-desc">
-                     <DescComp :val="item.comment"/>
-                </div>
+  <div class="tv-container">
+    <div class="tv-list">
+      <div class="tv-item" v-for="item in dataList" :key="item.id">
+        <div class="tv-img">
+          <div class="left-img">
+            <img
+              :src="'https://images.weserv.nl/?url=' + item.pic.normal"
+              alt=""
+            />
+          </div>
+          <div class="right-img">
+            <img
+              :src="'https://images.weserv.nl/?url=' + item.photos[0]"
+              alt=""
+              srcset=""
+            />
+          </div>
+        </div>
+        <div class="tv-info">
+          <div class="info-left">
+            <div class="tv-title">{{ item.title }}({{ item.year }})</div>
+            <div class="tv-rate">
+              <TvRate :val="item.rating"></TvRate>
             </div>
+            <div class="tv-int">{{ item.card_subtitle }}</div>
+          </div>
+          <div class="info-right">
+            <i class="iconfont icon-xiangkan"></i>
+          </div>
+        </div>
+        <div class="tv-desc">
+          <DescComp :val="item.comment" />
         </div>
+      </div>
     </div>
+  </div>
 </template>
 <style scoped>
-    .tv-list .tv-item{
-        border-bottom: 1px solid #ccc;
-        padding-bottom: .2rem;
-        margin-bottom: .2rem;
-    }
-    .tv-list{
-        padding:.2rem
-    }
-    .tv-list .tv-img{
-        display: flex;
-    }
-    .tv-list .tv-img .left-img{
-        width: 35%;
-        height: 3.3rem;
-        overflow: hidden;
-        border-radius: .1rem;
-    }
-    .tv-list .left-img img{
-        width: 100%;
-    }
-    .tv-list .tv-img img{
-        width: 100%;
-    }
-    .tv-list .tv-img .right-img{
-        margin-left: 2%;
-        width: 63%;
-        height: 3.3rem;
-        overflow: hidden;
-        border-radius: .1rem;
-    }
-    /* 信息部分样式 */
-    .tv-info{
-        display: flex;
-        margin-top: .1rem;
-    }
-    .tv-info .info-left{
-        width: 80%;
-    }
-    .tv-info .info-left .tv-title{
-        font-size: .3rem;
-        font-weight: 700;
-        color: #333;
-        margin-bottom: .1rem;
-    }
-    .tv-info .info-left .tv-rate{
-        font-size: .2rem;
-        color: #ff9900;
-        margin-bottom: .1rem;
-    }
-    .tv-info .info-left .tv-int{
-        font-size: .2rem;
-        color: #999;
-    }
-    .tv-info .info-right{
-        width: 20%;
-        text-align: right;
-        line-height: .1rem;
-    }
-    .tv-info .info-right i{
-        font-size: .45rem;
-        color: #ff9900;
-    }
-    /* 评论部分 */
-    .tv-desc{
-        font-size: .25rem;
-        color: #666;
-        margin-top: .2rem;
-    }
+.tv-list .tv-item {
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 0.2rem;
+  margin-bottom: 0.2rem;
+}
+.tv-list {
+  padding: 0.2rem;
+}
+.tv-list .tv-img {
+  display: flex;
+}
+.tv-list .tv-img .left-img {
+  width: 35%;
+  height: 3.3rem;
+  overflow: hidden;
+  border-radius: 0.1rem;
+}
+.tv-list .left-img img {
+  width: 100%;
+}
+.tv-list .tv-img img {
+  width: 100%;
+}
+.tv-list .tv-img .right-img {
+  margin-left: 2%;
+  width: 63%;
+  height: 3.3rem;
+  overflow: hidden;
+  border-radius: 0.1rem;
+}
+/* 信息部分样式 */
+.tv-info {
+  display: flex;
+  margin-top: 0.1rem;
+}
+.tv-info .info-left {
+  width: 80%;
+}
+.tv-info .info-left .tv-title {
+  font-size: 0.3rem;
+  font-weight: 700;
+  color: #333;
+  margin-bottom: 0.1rem;
+}
+.tv-info .info-left .tv-rate {
+  font-size: 0.2rem;
+  color: #ff9900;
+  margin-bottom: 0.1rem;
+}
+.tv-info .info-left .tv-int {
+  font-size: 0.2rem;
+  color: #999;
+}
+.tv-info .info-right {
+  width: 20%;
+  text-align: right;
+  line-height: 0.1rem;
+}
+.tv-info .info-right i {
+  font-size: 0.45rem;
+  color: #ff9900;
+}
+/* 评论部分 */
+.tv-desc {
+  font-size: 0.25rem;
+  color: #666;
+  margin-top: 0.2rem;
+}
 </style>
 <script>
 import TvRate from "@/components/TvRate.vue";
 import DescComp from "@/components/DescComp.vue";
 import axios from "axios";
 export default {
-    data() {
-        return {
-            testDesc:"温以凡回到家乡工作，意外遇到了高中同学桑延。久别重逢，两人彼此装不认识，却又一次次巧遇。温以凡遭到隔壁男人骚扰，无奈决定搬家。桑延的公寓被邻居家失火殃及，也需要搬家。桑延和温以凡因此再次相遇，两人决定合租。桑延的毒舌和温以凡的温柔，让彼此的生活都发生了变化。",
-            rateObj:{
-                star_count:2.5,
-                value: 0
-            },
-            dataList:[]
-        }
-    },
-    beforeMount() {
-        this.$emit('changePage','1001')
-    },
-    created() {
-        axios.get("/api/subject_collection/tv_domestic/items",{
-            params:{
-                count:10,
-                start:0
-            }
-        }).then((res)=>{
-            console.log(res)
-            this.dataList = res.data.subject_collection_items;
-        }).catch((err)=>{
-            console.log(err)
+  data() {
+    return {
+      dataList: [],
+      isLoading:false
+    };
+  },
+  beforeMount() {
+    this.$emit("changePage", "1001");
+  },
+  created() {
+    // 创建变量在当前页面中任何方法中都可以使用
+    this.startNum = 0;
+    this.getData();
+  },
+  mounted() {
+    this.scrollHandle();
+  },
+  methods: {
+    // 获取数据
+    getData() {
+      this.isLoading = true;
+      axios
+        .get("/api/subject_collection/tv_domestic/items", {
+          params: {
+            count: 10,
+            start: this.startNum,
+          },
         })
+        .then((res) => {
+          // console.log(res);
+          this.dataList = this.dataList.concat(res.data.subject_collection_items);
+          setTimeout(()=>{
+            this.isLoading = false;
+          },1000)
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
-    mounted() {
-        let dom = document.documentElement;
-        window.onscroll = ()=>{
-            //scrollTop 滚动条滚动时距离顶部的距离
-            let scrollTop = dom.scrollTop;
-            // clientHeight 可视区域的高度
-            let clientHeight = dom.clientHeight;
-            // scrollHeight 滚动条的总高度
-            let scrollHeight = dom.scrollHeight;
-            console.log(scrollHeight,clientHeight,scrollTop)
+    // 滚动条事件
+    scrollHandle() {
+      let dom = document.documentElement;
+      window.onscroll = () => {
+        //scrollTop 滚动条滚动时距离顶部的距离
+        let scrollTop = dom.scrollTop;
+        // clientHeight 可视区域的高度
+        let clientHeight = dom.clientHeight;
+        // scrollHeight 滚动条的总高度
+        let scrollHeight = dom.scrollHeight;
+        if (scrollTop + clientHeight + 100 >= scrollHeight) {
+          console.log("到底了");
+          if(!this.isLoading){
+            this.startNum += 10;
+            this.getData();
+          }
         }
+      };
     },
-    components:{
-        TvRate,
-        DescComp
-    }
-}
+  },
+  components: {
+    TvRate,
+    DescComp,
+  },
+};
 </script>