记录：两个变量实现上滑分页（vue版）

记录实现过的效果，防止忘记。

思路

• 获取当前加载出来的页面总高度（这里获取最外层div的总高度）
• 获取滚动出屏幕顶部的高度： document.documentElement.scrollTop（在手机上不行，永远是0） / window.pageYOffset (移动端)
• 获取屏幕宽度：window.innerHeight
• 计算剩余的，还没有出现的内容高度

将整个文档分成来两个部分：

1. 上面部分：区域外部，在此区域内滑动不请求下一页
2. 下面指定高度部分：区域内部，滑动到这个区域时请求下一页，在这个区域内滑动不请求下一页

变量变化表

当前位置	是否在区域内	区域是否发生改变
初始状态（在区域外部）	0	0
上滑到区域内	1	1
在区域内滑动	1	0
下滑回区域外	0	0

只有在滑动到区域内的这一个瞬间，才需要请求接口，所以当两个变量同时为真的时候，才去请求接口

关键代码实现

export default {
  name: 'HomeIndex'
  data () {
    return {
      pageSize: 5,      // 一页item数
      pageIndex: 0,     // index 此处是第几条数据的index(具体情况具体分析)
      windowHeight: window.innerHeight, // 窗口高度
      isIn: false,      // 是否在区域内
      isChange: false   // 区域是否发生改变
    }
  },
  computed: {
    isGetPage () {  
      return this.isIn && this.isChange // 是否能够请求下一页的变量
    }
  },
  methods: {
    getList (pageIndex) {
      let params = {
        pageIndex: JSON.stringify(pageIndex),
        pageSize: JSON.stringify(this.pageSize)
      }
      // 请求接口拿数据
      this.$axios.post('/api', param).then(data => {
        // 拿到数据做相应的处理
      }).catch(error => {
        console.log(error)
      })
    }
  },
  created () {
    this.getList(0)
  },
  mounted () {
    // 添加滑动事件监听
    window.addEventListener('scroll', () => {
      // 算出剩余未显示高度
      let height = this.$refs.homeCon.offsetHeight - window.pageYOffset - this.windowHeight
      // 指定区域高度，如果剩余高度小于指定高度，说明进入了指定的区域
      if (height <= 50) {
        // 在指定区域内，确定是否是从上面的区域进来，只有在两个变量都是false的时候，他才能够为true
        this.isChange = !this.isIn && !this.isChange
        this.isIn = true    // 在指定区域内
      } else {
        this.isIn = false       // 在区域外
        this.isChange = false   // 回归初始状态
      }
    })
  },
  destroyed () {
    window.removeEventListener('scroll', () => {})
  },
  watch: {
    isGetPage (newVal) {
      // 如果新的值是true
      if (newVal) {
        // 请求接口，具体情况具体分析
        this.getList(this.pageIndex += this.pageSize)
      }
    }
  }

复制代码

转载于:https://juejin.im/post/5cd976a4e51d453ae21957ec