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

<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>
    </div>
    <div class="alert-text" v-show="this.dataList.length>=this.dataTotal">
        <div>没有更多数据</div>
    </div>
  </div>
</template>
<style scoped>
.alert-text{
    text-align: center;
    font-size: 0.3rem;
    color: #999;
}
.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 {
      dataList: [],
      isLoading:false,
      dataTotal: 0
    };
  },
  beforeMount() {
    this.$emit("changePage", "1001");
  },
  created() {
    // 创建变量在当前页面中任何方法中都可以使用
    this.startNum = 0;
    this.getData();
  },
  mounted() {
    this.scrollHandle();
  },
  beforeDestroy() {
    window.onscroll = null;
  },
  methods: {
    // 获取数据
    getData() {
      this.isLoading = true;
      axios
        .get("/api/subject_collection/tv_domestic/items", {
          params: {
            count: 10,
            start: this.startNum,
          },
        })
        .then((res) => {
          this.dataTotal = res.data.total;
          this.dataList = this.dataList.concat(res.data.subject_collection_items);
          setTimeout(()=>{
            this.isLoading = false;
          },1000)
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 滚动条事件
    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.dataTotal>this.startNum){
            this.startNum += 10;
            this.getData();
          }
        }
      };
    },
  },
  components: {
    TvRate,
    DescComp,
  },
};
</script>