Wie implementiert das UI-Framework von Vue das gleitende Laden von Daten?

Es gibt auch eine sehr häufig verwendete Komponente auf unserem mobilen Endgerät, die zum Laden weiterer Komponenten verschiebbar ist. Normalerweise sehen wir viele Plug-Ins, die ziemlich kompliziert zu implementieren sind, und denken, dass diese Komponente schwierig ist, aber das ist nicht der Fall! ! Diese Komponente kann tatsächlich sehr einfach implementiert werden und die Erfahrung kann sehr großartig sein (natürlich haben wir die Pulldown-Aktualisierungsfunktion nicht implementiert)! ! Lassen Sie uns diese Komponente gemeinsam implementieren.

Effektanzeige

Zuerst zeigt ein GIF-Bild den Effekt, nachdem wir ihn erstellt haben, wie folgt:

DOM-Struktur

Die Seite sollte drei Teile enthalten: 1. Textbereich 2. Chrysantheme laden und Text aufzeichnen 3. Alles laden Daten Vervollständigter Text:

<p ref="scroll" class="r-scroll">
 <p class="r-scroll-wrap">
  <slot></slot>
 </p>
 <slot name="loading">
  <p v-show="isLoading" class="r-scroll-loading">
   <r-loading></r-loading>
   <span class="r-scroll-loading-text">{{loadingText}}</span>
  </p>
 </slot>
 <slot name="complate">
  <p v-show="isComplate" class="r-scroll-loading">{{complateText}}</p>
 </slot>
</p>

CSS-Stil

Der Container R-Scroll der gesamten Komponente sollte sein Feste Breite, der überschüssige Teil kann gescrollt werden; der Textbereich sollte automatisch mit dem Inhalt und der Höhe wachsen, wenn der Standardwert am unteren Rand des Bildlaufs angezeigt wird, der Datenladevorgang abgeschlossen ist Text wird angezeigt:

<style lang="scss">
@mixin one-screen {
 position: absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow: hidden;
}
@mixin overflow-scroll {
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
}

.r-scroll{
 @include one-screen;
 @include overflow-scroll;
 &-loading{
  text-align: center;
  padding-top: 3vw;
  padding-bottom: 3vw;
  font-size: 14px;
  color: #656565;
  line-height: 20px;
  &-text{
   display: inline-block;
   vertical-align: middle;
  }
 }
}
</style>

Javascript

Interaktionslogikanalyse:

1. Wenn die Seite initialisiert wird, rufen Sie den gesamten Komponentenknoten und den Textcontainerknoten ab

2. Binden Sie das Bildlaufereignis an den gesamten Containerknoten

3. Bestimmen Sie, ob der Abstand während des Scrollvorgangs des Containers kleiner als der angegebene Wert ist. Wenn er kleiner als das benutzerdefinierte Ereignis ist, laden Sie mehr

4. , den Geschäftscode Wenn es ausgelöst wird, werden die Daten geladen

weil Der Code ist nicht kompliziert, daher werde ich ihn nicht im Detail analysieren. Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar in den Kommentaren:

<script>
import rLoading from &#39;../loading&#39;
export default{
 components: {rLoading},
 props: {
  // 距离底部数值，小于或等于该数值触发自定义事件loadmore
  bottomDistance: {
   type: [Number, String],
   default: 70
  },
  // 加载中的文字
  loadingText: {
   type: String,
   default: &#39;加载中...&#39;
  },
  // 数据加载完成的文字
  complateText: {
   type: String,
   default: &#39;-- 我是个有底线的列表 --&#39;
  }
 },
 data () {
  return {
   // 用来判定数据是否加载完成
   isComplate: false,
   // 用来判定是否正在加载数据
   isLoading: false,
   // 组件容器
   scroll: null,
   // 正文容器
   scrollWrap: null
  }
 },
 watch: {
  // 监听isLoading，如果isLoading的值为true则代表触发了loadmore事件
  isLoading (val) {
   if (val) {
    this.$emit(&#39;loadmore&#39;)
   }
  }
 },
 methods: {
  // 初始化组件，获取组件容器、正文容器节点，并给组件容器节点绑定滚动事件
  init () {
   this.scroll = this.$refs.scroll
   this.scrollWrap = this.scroll.childNodes[0]
   this.scroll.addEventListener(&#39;scroll&#39;, this.scrollEvent)
   this.$emit(&#39;init&#39;, this.scroll)
  },
  scrollEvent (e) {
   // 如果数据全部加载完成了，则再也不触发loadmore事件
   if (this.isComplate) return
   let scrollTop = this.scroll.scrollTop
   let scrollH = this.scroll.offsetHeight
   let scrollWrapH = this.scrollWrap.offsetHeight
   // 组件容器滚的距离 + 组件容器本身距离大于或者等于正文容器高度 - 指定数值 则触发loadmore事件
   if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) {
    this.isLoading = true
   }
  },
  // 当前数据加载完成后调用该函数
  loaded () {
   this.isLoading = false
  },
  // 所有数据加载完成后调用该函数
  compleate () {
   this.isLoading = false
   this.isComplate = true
   this.scroll.removeEventListener(&#39;scroll&#39;, this.scrollEvent)
  }
 },
 mounted () {
  this.$nextTick(this.init)
 }
}
</script>

Außerdem wird in dieser Komponente zitiert, wenn es um die ladende kleine Chrysanthemenkomponente geht Der Anhang ist ein kleiner Chrysanthemen-Komponentencode. Da der Code einfach ist, werde ich ihn nicht im Detail analysieren:

Chrysantheme verwendet ein GIF-Bild und fügt es ein in der Chrysanthemenkomponente steht am Ende

<template>
 <p class="r-loading-container">
  <img src="./loading.gif">
 </p>
</template>
<script>
export default {}
</script>
<style lang="scss">
.r-loading-container{
 display: inline-block;
 vertical-align: middle;
 img{
  width: 20px;
  height: 20px;
  display: block;
 }
}
</style>

ein Anhang mit einem Anwendungsbeispiel:

<template>
 <p class="index">
  <r-scroll ref="scroll" @loadmore="queryDate">
   <p class="item" v-for="(item, index) in list">{{item}}</p>
  </r-scroll>
 </p>
</template>

<script>
import rScroll from &#39;../../components/scroll&#39;
function timeout (ms) {
 return new Promise((resolve, reject) => {
  setTimeout(resolve, ms, &#39;done&#39;)
 })
}

export default{
 components: {rScroll},
 data () {
  return {
   i: 0,
   list: []
  }
 },
 methods: {
  async queryDate () {
   await timeout(1000)
   let i = this.i
   let data = []
   for (let j = 0; j < 40; j++) {
    data.push(i + j)
    this.i = this.i + 1
   }
   this.list = this.list.concat(data)
   // 调用组件中的loaded函数，如果数据加载完成后记得调用组件的compleate函数
   this.$refs.scroll.loaded()
  }
 },
 mounted () {
  this.queryDate()
 }
}
</script>

<style lang="scss">
.item{
 background-color: #f2f2f2;
 border-bottom: 1px solid #fff;
 height: 40px;
 line-height: 40px;
 text-align: center;
}
</style>

Verwandte Empfehlungen:

js implementiert scrollende Maus zum Laden von Daten

jquery dataTable Daten im Hintergrund laden und paginieren

vue.js Tabellenpaginierung Ajax lädt Daten asynchron

Das obige ist der detaillierte Inhalt vonWie implementiert das UI-Framework von Vue das gleitende Laden von Daten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!