从后台获取数据后如何监听滑动事件并且限制每次从后台请求数据数量

super_DJ

于 2020-06-28 08:39:18 发布

阅读量320

点赞数

本文链接：https://blog.csdn.net/super_DJ/article/details/106991853

版权

 <div class="list_body" v-for="(item,index) in listarr" :key="index" @click="bodyLink(item)">
        <img alt :src="item.total_cover" />
        <div class="list_cont">
          <div class="list_title">{{item.total_title}}</div>

          <div class="list_bottom">
            <div class="list_author">{{item.total_author}}</div>

            <div class="list_time">{{item.total_time}}</div>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "list",
  components: {},
  data() {
    return {
      listarr: [],
      page: 0,
      size: 20,
      total_id: "",
      hasNextPage: true
    };
  },
  mounted() {
    //mounted页面加载完后自动运行，可以去运行方法，或者改变变量，而不是直接把axios写在这里，
    //this.$http 使用封装好的axios
    this.loadlist();
    //监听滑动事件
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    //监听滑动事件分页
    handleScroll() {
      //文档body的高度-滚动条距离上边的高度-滚动条高度如果小于200则请求下一页
      if (
        document.body.clientHeight - document.documentElement.scrollTop - 667 <
        200
      ) {
        if (this.hasNextPage == true) {
          this.page++;
          this.hasNextPage = false;//避免不断请求新数据
          this.loadlist();
        }
      }
    },
    //跳转分类页面
    listes() {
      this.$router.push({
        path: "/Navigation",
        query: {
          id: "1"
        }
      });
    },
    //详情跳转
    bodyLink(item) {
      console.log(item.total_id);
      this.$router.push({
        path: "/Content",
        query: {
          total_id: item.total_id
        }
      });
    },
    loadlist() {
      let obj = {
        page: this.page,
        size: this.size
      };
      this.$http
        .post("/api/total/list", obj)
        .then(res => {
          let data = res.data.result.data;
          // console.log(res)
          // console.log(res.data.message )
          data.length < this.size ? "" : this.hasNextPage = true;//判断数据长度如果小于size长度的话证明没有下一页了，否则将存在下一页
          this.listarr = [...this.listarr, ...data];//数据合并

          console.log(this.listarr);
        })
        .catch(err => {});
    }
  },

  created() {}
};
</script>