快捷導(dǎo)航

vue實(shí)現(xiàn)下拉加載其實(shí)沒那么復(fù)雜

更新時(shí)間：2019年08月13日 10:52:10 作者：pppercyWang

這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)下拉加載的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

之前缺乏移動(dòng)端的經(jīng)驗(yàn)。一直不知道上拉加載，下拉刷新是怎么實(shí)現(xiàn)的?，F(xiàn)在正好有個(gè)產(chǎn)品有這樣一個(gè)需求。想了一會(huì)沒有思路。就去找插件。啥vue-infinite-scroll，vue-virtual-scroll-list。啊呀，牛!無限滾動(dòng)，十萬條數(shù)據(jù)渲染。

經(jīng)過我一大圈的折騰。還是默默的卸載了插件。我只是需要實(shí)現(xiàn)一個(gè)下拉加載，不需要其他這么多的功能。看了看其他人的源碼，直接擼了起來，實(shí)現(xiàn)一個(gè)List組件。

效果展示

MList.vue

<template>
 <div class="list-wrap">
  <div class="content" ref="list" @scroll="onScroll">
   <slot></slot>
  </div>
  <div class="loading" v-show="loading">正在加載數(shù)據(jù)......</div>
 </div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
 components: {}
})
export default class extends Vue {
 @Prop()
 private loading!: boolean;
 private onScroll() {
  const obj: any = this.$refs.list;
  // clientHeight 視口高度 scrollTop 滾動(dòng)條離頂部的高度 scrollHeight 列表內(nèi)容的高度
  if (obj.clientHeight + obj.scrollTop === obj.scrollHeight) {
   this.$emit("toBottom");
  }
 }
}
</script>
<style scoped lang="scss">
.list-wrap {
 width: 100%;
 height: 100%;
 position: relative;
 .content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
 }
 .loading {
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: 20px;
  color: #ffffff;
 }
}
::-webkit-scrollbar { // 去除滾動(dòng)條邊框
 width: 0 !important;
}
::-webkit-scrollbar {
 width: 0 !important;
 height: 0;
}
</style>

使用組件

<div class="body">
   <m-list @toBottom="fetchNewData()" :loading="loading">
    <code-info class="item" v-for="(item,index) in dataList" :key="index"></code-info>
   </m-list>
</div>

 private dataList: any[] = [1, 2, 3, 4, 5, 6, 7, 8];
 private loading: boolean = false;
 private fetchNewData() {
  this.loading = true;
  setTimeout(() => {
   this.dataList.push(1, 2, 3);
   const ref: any = this.$refs.vueLoad;
   this.loading = false;
  }, 1000);
 }

這里需要注意的是m-list的父容器一定要固定高度，本例為body。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: