移动端H5工程基础框架搭建和组件集合

[zhaobinglong]

列表组件（带loading和empty）

列表触底加载

  created () {
    // 监听滚动事件
    window.addEventListener('scroll', this.onScroll)
  },
  methods: {
    onScroll () {
      // 可滚动容器的高度
      const innerHeight = document.querySelector('#superList').clientHeight
      // 屏幕尺寸高度
      const outerHeight = document.documentElement.clientHeight
      // 可滚动容器超出当前窗口显示范围的高度
      const scrollTop = document.documentElement.scrollTop
      // scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight <= (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
      // console.log('可滚动容器的高度:' + innerHeight, '屏幕尺寸高度:' + outerHeight, '可滚动容器超出当前窗口显示范围的高度:' + scrollTop)
      if (outerHeight + scrollTop >= innerHeight) {
        // 加载更多操作
        // this.getData()
        console.log('监听到列表组件到底')
        this.$emit('onReachBottom')
      }
    },
}

坑1: 组件卸载的时候需要及时销毁事件

  mounted () {
    // 监听滚动事件
    window.addEventListener('scroll', this.onScroll)
  },
  // 组件卸载，需要移除scroll监听器
  beforeUnmount () {
    // 移除的时候，必须移除的是同一个函数才可以
    window.removeEventListener('scroll', this.onScroll)
  },

参考

https://www.cnblogs.com/blackbentel/p/11065611.html

[zhaobinglong]

全局新建按钮重复点击屏蔽