Vue 觸底加載組件簡單實現

找到一個好用的下拉刷新，上拉加載的vue 插件   vue-scroller, git 地址

return

 

今天寫了個觸底加載的組件，因為經常用到，之前總會遇到一種需求，就是有一個列表，可以實現下拉刷新，上拉加載，

找了一個一個的插件，填了一個一個的坑后，決定自己寫個觸底加載，簡單實現下這個功能，不要跟我說：“這樣不好看，我們要看

有橡皮筋那樣的彈性效果，還要有下拉刷新，巴拉巴拉。。。。”，寫過幾次這種需求的我，已經不在乎這種效果了，丫的全是坑，

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

廢話說多了，來看下實現觸底加載的幾個步驟

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 ，用則寫，不用就不管了