pc端滑动翻页

韶华晨光

已于 2022-03-06 18:23:42 修改

阅读量271

点赞数

文章标签： vue

于 2021-04-13 11:35:52 首次发布

本文链接：https://blog.csdn.net/xshSun/article/details/115659585

版权

pc端滑动翻页

主要代码

<template>
  <div class="box">
    <div class="allheight"></div>
    <ul class="entries cl myOrderListWrapper">
      <li v-for="(item, index) in alldatalist" :key="item.id">
        <router-link
          :to="{
            name: 'Cande_video_details',
            params: { id: item.id, state: 2 },
          }"
        >
          <div class="picture">
            <div class="btn"></div>
            <img :src="urladdress(item.cover)" alt="" class="img" />
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      alldatalist: [],
      page: 1,
      pageSize: 9,
      prodListLoadingOver: false,
      prodListLastPage: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    fetchOrderListAction() {
      this.ruleForm.id = this.cate_id;
      this.ruleForm.page = this.page;
      this.ruleForm.pageNum = "10";
      this.prodListLoadingOver = false;
      gamedetailrequest(this.ruleForm).then((res) => {
        if ((res.code = 100000)) {
          this.prodListLoadingOver = true;
          this.game_id = res.data.data.game_id;
          this.threelist = res.data.data.top_three;
          // this.alldatalist = res.data.data.all_data;
          this.createddetail = res.data.data;
          if (this.page == 1) {
            this.alldatalist = res.data.data.all_data;
          } else {
            this.alldatalist = this.alldatalist.concat(res.data.data.all_data);
          }
          if (res.data.data.all_data.length < this.pageSize) {
            this.prodListLastPage = true;
          }
        }
      });
    },
    // 滑动翻页
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight; //屏幕的高度
      let prodListHeight =
        document.querySelector(".myOrderListWrapper").offsetHeight - h - 20; //.myOrderListWrapper 商品列表容器
      let allheight = document.querySelector(".allheight").offsetHeight - h; //上面三个模块的总高度
      let calculateheight = scrollTop - allheight;
      console.log(calculateheight, ":::", prodListHeight);
      if (
        calculateheight > prodListHeight &&
        this.prodListLoadingOver &&
        !this.prodListLastPage
      ) {
        this.page = this.page + 1;
        console.log(this.page, "哈哈哈哈哈");
        this.fetchOrderListAction();
      }
    },
    urladdress,
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>