博客

今天写了个触底加载的组件，因为经常用到，之前总会遇到一种需求，就是有一个列表，可以实现下拉刷新，上拉加载，

找了一个一个的插件，填了一个一个的坑后，决定自己写个触底加载，简单实现下这个功能，不要跟我说：“这样不好看，我们要看

有橡皮筋那样的弹性效果，还要有下拉刷新，巴拉巴拉。。。。”，写过几次这种需求的我，已经不在乎这种效果了，丫的全是坑，

一句“可以，但没必要”，就完了。

废话说多了，来看下实现触底加载的几个步骤

1. 触底加载的布局，一个高度固定的容器，然后容器里面放一个列表，一般列表的初始高度是大于容器的高度，小于的话它滚动不了，就监听不到

它有没有滚到底部了。注意： 容器高度取

clientHeight

，列表高度取

offsetHeight

2. 监听容器的滚动事件，在滚动时获取滚出容器的高度，当滚出的高度加上容器的高度等于列表的高度时就触底了。触底加载的组件就这些逻辑了

上触底加载组件代码

<template>
  <div class="infinite" ref="container" :style="{height: height}">
    <div class="inner" ref="inner">
      <!-- 列表标题 -->
      <slot name="title"></slot>
      <!-- 这里放列表 -->
      <slot></slot>
      <!-- 加载中的动画 -->
      <slot name="loading" v-if="loading"></slot>
      <!-- 加载完成的动画 -->
      <slot name="nomore" v-if="nomore"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'infinite-scroll',
  props: {
    height: {
      type: String,
      default: '100%'
    },
    loading: {
      type: Boolean,
      default: false
    },
    nomore: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      containerHeight: 0,
      innerHeight: 0
    }
  },
  created () {

  },
  mounted () {
    this.containerHeight = this.$refs.container.clientHeight
    this.innerHeight = this.$refs.inner.offsetHeight
    this.$refs.container.addEventListener('scroll', this.initScroll)
  },
  methods: {
    initScroll (e) {
      if (this.loading || this.nomore) return
      this.innerHeight = this.$refs.inner.offsetHeight
      let scrollTop = e.target.scrollTop
      if (scrollTop + this.containerHeight >= this.innerHeight) {
        console.log('-----------------触底了-------------');
        this.$emit('loadBottom')
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .infinite {
    width: 100%;
    background-color: skyblue;
    overflow: auto;
    -webkit-overflow-scrolling: touch; // 解决iOS滚动问题
  }
</style>

然后在页面中使用这个组件,我把组件注册成全局组件了，所以直接就用在页面了

<template>
  <div class="home">
    <div class="scroll">
      <infinite-scroll class="infinite" :loading="loading" :nomore="nomore" @loadBottom="loadmore" >
        <template slot="title">
          <p>这是一个标题</p>
        </template>
        <p v-for="item in list" :key="item.id">{{ item.name + '---' + item.value }}</p>
        <template slot="loading" >
          <i>加载中</i>
        </template>
        <template slot="nomore">
          <i>没有更多了</i>
        </template>
      </infinite-scroll>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      loadTotal: false,
      list: []
    }
  },
  created () {
    this.loadmore()
  },
  methods: {
    async loadmore () {
      if (this.loading || this.nomore) return
      this.loading = true
      const response = await this.$post('******', {
        pageSize: this.pageSize,
        pageNumber: this.pageNumber
      })
      if ('请求成功') {
        this.total = response.totalRecord
        this.list.push(...response.list)
        if (this.list.length >= this.total) {
          this.nomore = true
        } else {
          this.pageNumber ++
        }
      }
      this.$nextTick(() => {
        setTimeout(() => {
          this.loading = false
        }, 300);
      })
    },
  }
}
</script>
<style lang="less" scoped>
.home {
  padding: 1px;
  .scroll {
    width: 80%;
    height: 7rem;
    margin: 1rem auto;
    .infinite {
      font-size: .32rem;
      line-height: .8rem;
      overflow: auto;
      i {
        font-size: .24rem;
        text-align: center;
        width: 100%;
        display: block;
      }
    }
  }
}
</style>

组件中有这么几个参数时必传的

1.

loading

节流的，开始加载时是


true


加载更多的请求完成并显示在页面上了改为


false

2.

nomore

所有数据是否都已加载完成

3.

loadBottom

监听这个事件，事件触发后就是要加载更多了

4. 还有一些 slot ，用则写，不用就不管了