So laden Sie Daten durch Schieben in das mobile UI-Framework von Vue

In diesem Artikel wird hauptsächlich die gleitende Lademethode des Vue Mobile UI Framework vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Vorwort

Es gibt auch eine sehr häufige Komponente auf unserem mobilen Endgerät, die verschiebbar ist, um weitere Komponenten zu laden. 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 ein GIF-Bild, um den Effekt zu zeigen, 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 Die Breite ist festgelegt und der überschüssige Teil kann gescrollt werden. Der Textbereich sollte automatisch mit dem Inhalt wachsen und die Chrysantheme wird unten angezeigt, wenn der Standardwert erreicht ist Der Abschlusstext zum Laden der Daten 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

Interaktive Logikanalyse:

1. Seiteninitialisierung Zu diesem Zeitpunkt erhalten Sie den gesamten Komponentenknoten und den Textcontainerknoten

2. Binden Sie das Bildlaufereignis an den gesamten Containerknoten

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

4. , Der Geschäftscode hört auf das Loadmore-Ereignis und lädt die Daten.

Da der Code nicht kompliziert ist, 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 der Komponente auf die Ladechrysanthemenkomponente verwiesen, und a Da der Code einfach ist, werde ich ihn nicht im Detail analysieren:

Chrysantheme verwendet ein GIF-Bild. Bitte machen Sie ein Foto Ihres Lieblings-Chrysanthemen-GIF und fügen Sie es ein Unter dem Pfad von die Chrysanthemenkomponente

<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>

steht am Ende

Zum Schluss gibt es hier noch einen Anhang mit a 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>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwendung von vue2 zur Implementierung von Warenkorb- und Adressauswahlfunktionen

Angular-Entwicklungspraxis für serverseitiges Rendering

Vue-Beispielcode zur Implementierung von „Alles und Keine auswählen“

Das obige ist der detaillierte Inhalt vonSo laden Sie Daten durch Schieben in das mobile UI-Framework von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!