vue 监听页面的滚动到页面底部

HTML

 <div class="moredata" v-if="loading"><van-loading size="24px">加载中...</van-loading></div>

 <div class="moredata" v-if="fineshed">{{moredata}}</div>

 

DATA

　  loading: false,

      fineshed: false,

      page: 1,

      page_total: '',

      rows: 10,

      goodsarea: 8,

      goodsList: [],

      moredata: '没有更多了'

JS

mounted () {

    const _this = 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) {

        _this.loading = true

        if (_this.page <= _this.page_total) {

            _this.page += 1 // 页数+1

　　// 重新加载数剧

            _this.gethomegoods()

        }

        // 数据全部加载完成

        if (_this.page > _this.page_total) {

          _this.loading = false

          _this.finished = true

        }

      }

    }

  }