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
        }
      }
    }
  }
好文要顶 
posted @   崛起崛起  阅读(1048)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
点击右上角即可分享
微信分享提示