三、下拉刷新loading显示与上拉加载

image.png

并将其设置

provide () {
    return {
      'home': this
    }
  },

在子组件中注入、这样就能在子组件中使用父组件了

inject: ['home'],

2、在子组件生命周期中为其设置滚动事件、滚动时就会触发 onScroll 事件

mounted () {
    this.home.$refs['homeView'].addEventListener('scroll', this.onScroll)
  }

3、在显示的数据列表下写上加载中与加载完成，其显示由loading(影片数据加载中)与finished(数据加载完成)控制、默认都为false

image.png

4、在加载时将loading设为true，加载完成后设为false,这样加载时就会出现圈圈再转

getFilmList () {
      // 加载中
      this.loading = true

      Axios.get('https://m.maizuo.com/gateway', {
        params: {
          cityId: this.cityId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: this.curTabIndex === 0 ? 1 : 2, // 控制影片类型
          k: 9853774
        }
      }).then(response => {
        const { data } = response
        // 数组拼接
        this.filmList = [...this.filmList, ...data.data.films]
        // 总的页数
        this.totalPages = Math.ceil(data.data.total / this.pageSize)
        // 加载完成
        this.loading = false
      })
    },

5、滚动事件

onScroll (event) {
      // 判断是否滚动到底部
      const clientHeight = event.target.clientHeight//滚动可视试图高度
      const scrollHeight = event.target.scrollHeight//滚动内容总高度
      const scrollTop = event.target.scrollTop//滚动条高度
      const isEnd = scrollTop >= scrollHeight - clientHeight - 50
      // 滚动到底部并且没在加载状态中
      if (isEnd && !this.loading) {
        if (this.pageNum >= this.totalPages) {
          this.finished = true
          return
        }
        // 下一页
        this.pageNum++
        // 发请求
        this.getFilmList()
      }
    }

isEnd为True时、并不在加载状态时页数加1、当请求页数大于总页数时
就将this.finished = true、出现请求完成,小于时页数自增并重发请求。
滚动条高度小于20px时就将数据清空、页数设为1、重发请求
6、两点需要注意、
一、数据要拼接
this.filmList = [...this.filmList, ...data.data.films]
二、页数请求不能超过总页数,，不然会一直发请求

this.totalPages = Math.ceil(data.data.total / this.pageSize)//向上取整
this.pageNum >= this.totalPages