vue开发H5简单上拉加载功能代码全vue监听滚动底部

没用ui框架写简单的实现了下功能

思路:上拉加载肯定要滚动到底部，所以就先监听滚动条滚动到底部 然后执行分页+1请求数据push到渲染列表中即可；

同时判断最后一页时不请求，展示无数据状态

主要代码：

1：监听滚动底部

<script>

export default {
  name: "index_SearchPage",
  data() {
    return {
     
    };
  },
  components: {
    headAssembly
  },
  created() {
    var that=this
    window.onscroll = function() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {        
           //已滚动底部
          that.information_Load();
      }
    };
  },
  mounted() {
    this.inputTyping();
  },

2.滚动底部后页面+1 请求数据 push到渲染列表 page为最大值时 展示无数据状态

inputTyping() {
      this.information_page=1
      
      var that = this;
      var baseUrl = process.env.API_ROOT;
      
        //信息广场
        var formData0 = new FormData();
        formData0.append("page", 1);
        formData0.append("q", that.inputVal);
        formData0.append("source", 3);
        axios
          .post(
            baseUrl + "/apiyd/Information/",
            formData0
          ) // 问号后面是要传送的参数
          .then(res => {
            //  请求成功后的函数
            if (res.data.code == 1000) {
              that.information_list = res.data.data.data;//渲染列表数据
              that.information_last_page = res.data.data.last_page;//获得总页数
            } else {
              $.alert(res.data.message);
            }
          });
    }


information_Load() {
      //信息上拉加载
      let pageNum = this.information_page + 1;//页面+1
      let last_page = this.information_last_page;//总页数
      if (pageNum < last_page + 1) {
        this.information_page = pageNum;
        this.information_list_NoData = false;
        $.showLoading("数据加载中");
        var that = this;
        var baseUrl = process.env.API_ROOT;
        //信息广场
        var formData0 = new FormData();
        formData0.append("page", that.information_page);
        formData0.append("q", that.inputVal);
        formData0.append("source", 3);
        axios
          .post(
            baseUrl + "/apiyd/Information/",
            formData0
          ) // 问号后面是要传送的参数
          .then(res => {
            //  请求成功后的函数
            if (res.data.code == 1000) {
              $.hideLoading();
              that.information_list.push(...res.data.data.data);
            } else {
              $.hideLoading();
              $.alert(res.data.message);
            }
          });
      } else {//当大于总页数展示无数据状态
        this.information_list_NoData = true;
      }
    },

完整代码：

<template>
  <div>
    <div class="longinPage">
      <headAssembly textTitle="搜索" ifReturn="1"/>

      <div class="page__bd">
        <div class="weui-search-bar" id="searchBar">
          <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
              <i class="weui-icon-search"></i>
              <input
                @input="inputTyping"
                type="search"
                v-model="inputVal"
                class="weui-search-bar__input"
                id="searchInput"
                placeholder="搜索"
                required
              >
              <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText">
              <i class="weui-icon-search"></i>
              <span>搜索</span>
            </label>
          <