Pull-Down-Aktualisierung und Pull-Up-Ladekomponenten basierend auf Vue-Kapselung

<Vorlage>
  <div Klasse="aktualisieren" id="aktualisieren">
    <slot name="upTilte"></slot>
    <Steckplatz></Steckplatz>
    <slot name="downTilte"></slot>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "PullupOrPulldownRefresh",
  Requisiten: {
    // Maximale Bewegungsdistanz maxMove: {
      Typ: Nummer,
      Standard: 300
    },
    // Dämpfungskoeffizient Reibung: {
      Typ: Nummer,
      Standard: 0,3
    }
  },
  Daten() {
    zurückkehren {
      startY: 0,
      ul: null,
      Unentschieden: null,
      nach oben: null,
      nach unten: null,
      y: 0 // Trägheitsrückpralldistanz}
  },
  montiert() {
    dies.$nextTick(() => {
      this.draw = document.getElementById('aktualisieren')
      dies.ul = dies.draw.children[1]
      dies.oben = dies.zeichnen.Kinder[0]
      dies.nach unten = dies.zeichnen.Kinder[2]
      dies.draw.addEventListener('touchstart', dies.touchstart)
      this.draw.addEventListener('touchmove', this.touchmoveEvent)
      this.draw.addEventListener('touchend', this.touchendEvent)
    })
  },
  Methoden: {
    // Touch-Start-Ereignis touchstart(Ereignis) {
      this.startY = event.changedTouches[0].clientY
    },
    // Berühren Sie das Bewegungsereignis touchmoveEvent(event) {
      const height = this.ul.clientHeight - this.draw.clientHeight
      wenn (Höhe === this.draw.scrollTop || this.draw.scrollTop === 0) {
        var a = event.changedTouches[0].clientY - this.startY
        dies.y = a <= dies.maxMove ? a : dies.maxMove
        // Um ​​das Verzögerungsproblem zu beseitigen, müssen Sie den Übergangseffekt löschen this.ul.style.transition = 'none'
        this.ul.style.transform = 'translateY(' + this.friction * this.y + 'px)'
        // Status ändern const upHeight = -this.up.clientHeight + this.friction * this.y
        // Zum Starten nach unten ziehen, wenn (this.friction * this.y > 0) (this.setStatus(this.friction * this.y), this.up.style.transition = 'none', this.up.style.transform = 'translateY(' + upHeight + 'px) translateX(-50%)')
        // Hochziehen und starten, wenn (this.friction * this.y < 0) (this.setStatus(this.friction * this.y), this.down.style.transition = 'none', this.down.style.marginTop = this.friction * this.y + 'px')
      }
    },
    // Touch-Ende-Ereignis touchendEvent(event) {
      wenn (diese.Friktion * dies.y >= 50) dies.$emit('RefreshUp', diese.Friktion * dies.y)
      sonst wenn (diese.reibung * dies.y < -50) dies.$emit('RefreshDown', diese.reibung * dies.y)
      sonst this.resetStyle()
    },
    // Zurücksetzen und Übergangseffekte hinzufügen resetStyle() {
      this.ul.style.transition = "Transformation .6s"
      this.ul.style.transform = "translateY(" + 0 + "px)"
      this.up.style.transition = "alle .6s"
      this.up.style.transform = 'übersetzeY(-' + this.up.clientHeight + 'px) übersetzeX(-50%)'
      this.down.style.transition = "alle .6s"
      this.down.style.marginTop = -this.down.clientHeight + 'px'
    },
    // Setze den Aktualisierungsstatus setStatus(y) {
      dies.$emit('setStatus', y)
    }
  }
}
</Skript>

<style lang="scss">
.aktualisieren {
  Breite: 100 %;
  Höhe: 100vh;
  Rand: 2px durchgezogen #ccc;
  Position: relativ;
  Überlauf: versteckt;
  Überlauf: automatisch;
  Position: fest;
  ul {
    Zoom: 1;
    Polsterung: 0 – 10 %;
  }

  ul::nach {
    Inhalt: '';
    Anzeige: Block;
    Sichtbarkeit: versteckt;
    Höhe: 0;
    klar: beides;
  }

  li {
    Listenstil: keiner;
    Breite: 100 %;
    Höhe: 50px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
  }
  .UpRefresh {
    Position: absolut;
    links: 50%;
    transformieren: übersetzenX(-50%);
    Z-Index: -9;
  }
  .DownRefresh {
    Position: relativ;
    links: 50%;
    transformieren: übersetzenX(-50%);
    Rand oben: -10px;
    Z-Index: -9;
  }
}
</Stil>

<Vorlage>
  <div>
    <PullupOrPulldownRefresh
      ref="PullupOrPulldownRefresh"
      :maxMove="maxMove"
      :Reibung="Reibung"
      @RefreshUp="Aktualisieren"
      @RefreshDown="AktualisierenNach unten"
      @setStatus="Status festlegen"
    >
      <Vorlage v-slot:upTilte>
        <!-- <div class="UpRefresh" v-show="isUpRefresh">{{ Uptitle }}</div> -->
        <div Klasse="UpRefresh" v-show="isUpRefresh">
          <img :src="require('@/assets/logo.png')" alt="" />
          <p>{{ Uptitle }}</p>
        </div>
      </Vorlage>
      <ul>
        <li
          v-for="(Element, Index) in Daten"
          :Schlüssel="Index"
          Stil="Hintergrund: orange"
        >
          {{ Artikel }}
        </li>
      </ul>
      <Vorlage v-slot:downTilte>
        <div Klasse="DownRefresh" v-show="isDownRefresh">{{ Downtitle }}</div>
      </Vorlage>
    </PullupOrPulldownRefresh>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      maxBewegung: 300,
      Reibung: 0,3,
      Daten: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      isUpRefresh: false,
      isDownRefresh: false,
      Downtitle: 'Ziehen Sie nach oben, um mehr zu laden',
      Obertitel: „Zum Aktualisieren nach unten ziehen“
    }
  },
  Methoden: {
    setStatus(y) {
      wenn (y && y > 0) {
        this.isUpRefresh = true
        this.Uptitle = 'Zum Aktualisieren nach unten ziehen'
        if (y >= 50) this.Uptitle = 'Zum Aktualisieren loslassen'
        zurückkehren
      }
      this.isDownRefresh = true
      this.Downtitle = 'Ziehen Sie nach oben, um mehr zu laden'
      if (y <= -50) this.Downtitle = 'Loslassen, um mehr zu laden'
    },
    Aktualisieren(y) {
      wenn (!y) zurückgeben
      wenn (y >= 50) {
        this.Uptitle = 'Aktualisieren'
        setzeTimeout(() => {
          für (var i = 1; i <= 10; i++) {
            diese.Daten.push(diese.Daten[diese.Datenlänge - 1] + 1)
          }
          this.$refs.PullupOrPulldownRefresh.resetStyle() // Rebound zurücksetzen}, 1000)
      }
    },
    RefreshDown(y) {
      wenn (!y) zurückgeben
      wenn (y <= -50) {
        this.Downtitle = "Wird geladen"
        setzeTimeout(() => {
          für (var i = 1; i <= 10; i++) {
            diese.Daten.push(diese.Daten[diese.Datenlänge - 1] + 1)
          }
          this.$refs.PullupOrPulldownRefresh.resetStyle() // Rebound zurücksetzen}, 1000)
      }
    }
  }
}
</Skript>

<style scoped lang="scss">
.UpRefresh img{
  Breite: 30px;
}
</Stil>