vue项目 h5上拉加载（分页功能）

<template>
  <div class="receivable">
    <div class="application-header flex-betweenCenter" @click="goBack">
      <img
        class="prod-header-navImg"
        src="../../assets/images/icon_back.png"
        alt=""
      />
      <div class="font18 hy_color weightBold">登录日志</div>
      <div></div>
    </div>
    <div class="receivable-main">

       <ul class="scroll-box" :style="{ height: clientHeight + 'px' }" v-if="is_number==1" @scroll="handleScroll($event)">

        <li class="log-ul-li" v-for="item in list" :key="item.id">
          <div>
            <div>{{ item.type }}</div>
            <div class="log-color">{{ item.create_time }}</div>
          </div>
          <div>{{ item.operate }}</div>
        </li>
        <div class="bottom-tishi">{{loadingText}}</div>
      </ul>
      <div v-if="is_number == 2">
        <div class="emptaype-box">
          <img src="../../assets/images/empty_order.png" alt="" />
          <p>暂无数据哦！~</p>
        </div>
      </div>
    </div>
    <div class="receivable-footer"></div>
  </div>
</template>
<script>
import { storage } from "@/utils/storage";
export default {
  name: "Receivable",
  data() {
    return {
      is_number: 1，
      p: 1,
      list: [],
      timer: null,
      loadingText:'',
      clientHeight: null
    };
  },
  created() {this._getUserLoginLog();
    this.clientHeight = +document.documentElement.clientHeight -60
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    _getUserLoginLog() {
      let data = {
        token: this.token,
        p: 1,
      };
      this.$api.getUserLoginLog(data).then((res) => {
        if (res.data.length > 0) {
          this.list = res.data;
          this.is_number = 1;
          this.p++
        } else {
          this.is_number = 2;
        }
      });
    },
    handleScroll(e) {
      //这里使用个延时加载，不然滑动屏幕的时候会不断触发方法，去计算高度，浪费性能
      let that = this
        clearTimeout(this.timer)
        that.timer = setTimeout(function () {
          let clientHeight = e.target.clientHeight;
          let scrollTop = e.target.scrollTop;
          let scrollHeight = e.target.scrollHeight;
          console.log(clientHeight,scrollTop,scrollHeight)
          if (clientHeight + scrollTop >= scrollHeight - 10) {
             that.getUserLoginLogMeuns()            
          }
        }, 500);
    },
    getUserLoginLogMeuns() {
      this.loadingText = '加载更多'
      let data = {
        token: this.token,
        p: this.p,
      };
      this.loadingText = '加载中...'
      this.$api.getUserLoginLog(data).then((res) => {
        if (res.data.length > 0) {
          this.list = this.list.concat(res.data)
           this.is_number = 1
        } else if(res.data.length==0){
            this.loadingText = '没有更多了'
        }
        this.p++
      });
    },
  },
};
</script>