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

        }

      }

    }

  }