vue實(shí)現(xiàn)下拉加載其實(shí)沒(méi)那么復(fù)雜-創(chuàng)新互聯(lián)

前言

成都創(chuàng)新互聯(lián)是一家企業(yè)級(jí)云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營(yíng)經(jīng)驗(yàn)。主營(yíng)GPU顯卡服務(wù)器，站群服務(wù)器，多線服務(wù)器托管，海外高防服務(wù)器，大帶寬服務(wù)器，動(dòng)態(tài)撥號(hào)VPS，海外云手機(jī)，海外云服務(wù)器，海外服務(wù)器租用托管等。

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

經(jīng)過(guò)我一大圈的折騰。還是默默的卸載了插件。我只是需要實(shí)現(xiàn)一個(gè)下拉加載，不需要其他這么多的功能?？戳丝雌渌说脑创a，直接擼了起來(lái)，實(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>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：vue實(shí)現(xiàn)下拉加載其實(shí)沒(méi)那么復(fù)雜-創(chuàng)新互聯(lián)
分享URL：http://muchs.cn/article0/dpihoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站排名、外貿(mào)建站、網(wǎng)站改版、搜索引擎優(yōu)化、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)