美文网首页
vue-cli4上拉加载更多

vue-cli4上拉加载更多

作者: 时光把最好的就在最后 | 来源:发表于2021-03-23 11:07 被阅读0次

    第一步: 大体框架类似(里面也可以加加载状态,因为我们有lodding的判断)

      <div class="helloword">
        <ul>
          <li v-for="item in list" :key="item.id" v-text="item.name ? item.name : '-- --'"></li>
        </ul>
      </div>
    

    第二步: 在data中定义loding: false和list:[]

      data () {
        return {
          lodding: false,
          page: 1, // 分页(size: 10直接写在请求里面)
          searchs: '',
          list: []
        }
      }
    

    第三步:初始化实例时挂载请求

      mounted () {
        this.getlist(this.searchs, this.page, '', '', '')
        window.addEventListener('scroll', this.scrllos)
      }
    

    第四步:scroll监听事件和getlist请求事件

      methods: {
        getlist (q, page, zczb, clsj, hymc) {
          compansearch(q, page, zczb, clsj, hymc).then(res => {
            this.list = dates.content
            this.total = dates.total
          })
        },
        scrllos () {
          // 当前可视高度
          const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
          // 获取内容向上滚动了多少距离
          const domScrollTop = document.body.clientHeight || document.querySelector('.helloword').clientHeight
          // 当内容滚动到距离底部<50时,且没有加载完成
          // 内容距离底部多少距离 = 内容总高度-滚动高度-当前可视高度
          if (this.$el.scrollHeight - domScrollTop - scrollTop < 50 && !this.liststatus) {
            // 设置为正在加载中
            this.liststatus = true
            setTimeout(() => {
              if (this.list.length < this.total) {
                this.page++
                compansearch(this.searchs, this.page).then(res => {
                  this.list = [...this.list, ...res.data.content]
                  this.total = res.data.total
                  this.liststatus = false
                })
              }
            }, 300)
          }
        }
      }
    

    最后一步:清除scroll监听事件,必须的,不然去奇特页面还会有请求存在,vue是单页面应用嘿嘿嘿

    destroyed () {
        window.removeEventListener('scroll', this.scrllos)
    }
    

    随笔 留记......

    相关文章

      网友评论

          本文标题:vue-cli4上拉加载更多

          本文链接:https://www.haomeiwen.com/subject/ggaxhltx.html