So integrieren Sie vux in vue.js, um Pull-Up-Laden und Pull-Down-Aktualisierung zu implementieren

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Integration von Pull-Up, Load und Pull-Down in VUX ein. Der Artikel stellt es im Detail anhand von Beispielcode vor oder arbeiten. Es braucht Freunde, lasst uns gemeinsam lernen.

Vorwort

Vux ist eine UI-Komponentenbibliothek für mobile Seiten, die auf Basis von Vue und Weui entwickelt wurde. Die ursprüngliche Entwicklungsabsicht besteht darin, dem WeChat des Unternehmens gerecht zu werden Formularanforderungen, da das Fragebogenformularsystem eines Drittanbieters auf Mobiltelefonen wirklich hässlich ist (der PC-Stil ist nur an die Größe angepasst). Also habe ich die Formularkomponente mit Vue neu erstellt und bin dann außer Kontrolle geraten und habe auch andere häufig verwendete Komponenten entwickelt.

Im Vergleich zu React bevorzuge ich immer noch Vue. Abgesehen davon, dass es derzeit nicht viele Community-Komponenten gibt, sind die umgebenden Konstruktionstools relativ vollständig (der Autor ist auch sehr fleißig).

Im Folgenden gibt es nicht viel zu sagen, werfen wir einen Blick auf die ausführliche Einführung.

Erstes Bild

Projekt erstellen

Verwenden Sie vue-cli, um ein Vue-Projekt zu erstellen

Installieren Sie Vux, siehe: Vux-Schnellstart

Konfiguration

Offizielle Dokumentenadresse

Nach dem Öffnen sehen Sie einen Absatz

Diese Komponente wird nicht mehr gewartet und wird in den meisten Fällen nicht empfohlen Sie müssen diese Komponente verwenden. Es wird empfohlen, verwandte Komponenten von Drittanbietern zu verwenden, und damit verbundene Probleme werden nicht behandelt.

Ich weiß nicht, warum der Autor es nicht pflegt, die Nachfrage ist offensichtlich groß

Ich habe in der Demo nicht die LoadMore-Komponente verwendet, sondern die Verwendung- Pullup und Use-Pulldown, die mit Scroller geliefert werden. Das Folgende ist meine Konfiguration

<!-- 
 height: 我用到x-header了，文档里说header高是48px,所以这里设置成-48
 -->
<scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
  use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
  lock-x ref="scrollerBottom" height="-48">
</scroller>
<script>
 import {Scroller, XHeader} from &#39;vux&#39;
 const pulldownDefaultConfig = {
 content: &#39;下拉刷新&#39;,
 height: 40,
 autoRefresh: false,
 downContent: &#39;下拉刷新&#39;,
 upContent: &#39;释放后刷新&#39;,
 loadingContent: &#39;正在刷新...&#39;,
 clsPrefix: &#39;xs-plugin-pulldown-&#39;
 }
 const pullupDefaultConfig = {
 content: &#39;上拉加载更多&#39;,
 pullUpHeight: 60,
 height: 40,
 autoRefresh: false,
 downContent: &#39;释放后加载&#39;,
 upContent: &#39;上拉加载更多&#39;,
 loadingContent: &#39;加载中...&#39;,
 clsPrefix: &#39;xs-plugin-pullup-&#39;
 }
 export default {
 components: {
 XHeader,
 Scroller
 },
 mounted() {
 this.$nextTick(() => {
 this.$refs.scrollerBottom.reset({top: 0})
 })
 },
 data() {
 return {
 list: [],
 pullupDefaultConfig: pullupDefaultConfig,
 pulldownDefaultConfig: pulldownDefaultConfig
 }
 },
 methods: {
 refresh() { 
 },
 loadMore() {
 
 }
 }
 }
</script>

Schnittstellendurchlaufdaten anfordern

Der Schnittstellendienst verwendet die Daten Von Mock.js generiert, können Sie sich diesen Artikel ansehen: Zufällige Daten von Mock.js verwenden und Express zur Ausgabe der JSON-Schnittstelle verwenden

Axios installieren

yarn add axios

//...
 methods: {
 fetchData(cb) {
  axios.get('http://localhost:3000/').then(response => {
  this.$nextTick(() => {
   this.$refs.scrollerBottom.reset()
  })
  cb(response.data)
  })
 }
 }
//...

Verbessern die Methoden „refresh“ und „loadMore“

//...
 methods: {
 refresh() {
  this.fetchData(data => {
  this.list = data.list
  this.$refs.scrollerBottom.enablePullup()
  this.$refs.scrollerBottom.donePulldown()
  })
 },
 loadMore() {
  this.fetchData(data => {
  if (this.list.length >= 10) {
   this.$refs.scrollerBottom.disablePullup()
  }
  this.list = this.list.concat(data.list)
  this.$refs.scrollerBottom.donePullup()
  })
 }
 }
//...

in der Komponente Rufen Sie beim Laden die Methode „loadMore“ auf

//...
 mounted() {
 this.$nextTick(() => {
  this.$refs.scrollerBottom.reset({top: 0})
 })
 this.loadMore()
 }
//...

Schließen Sie den HTML-Teil ab

<scroller>
 <p style="padding: 10px 0">
 <p class="box" v-for="(item, index) in list" :key="index">
  <p class="list"></p>
 </p>
 </p>
</scroller>

Der vollständige Code

<template>
 <p>
 <x-header :left-options="{&#39;showBack&#39;: false}">上拉加载，下拉刷新</x-header>
 <scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
    use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
    lock-x ref="scrollerBottom" height="-48">
  <p style="padding: 10px 0">
  <p class="box" v-for="(item, index) in list" :key="index">
   <p class="list"></p>
  </p>
  </p>
 </scroller>
 </p>
</template>
<script>
 import {Scroller, XHeader} from &#39;vux&#39;
 import axios from &#39;axios&#39;

 const pulldownDefaultConfig = {
 content: &#39;下拉刷新&#39;,
 height: 40,
 autoRefresh: false,
 downContent: &#39;下拉刷新&#39;,
 upContent: &#39;释放后刷新&#39;,
 loadingContent: &#39;正在刷新...&#39;,
 clsPrefix: &#39;xs-plugin-pulldown-&#39;
 }
 const pullupDefaultConfig = {
 content: &#39;上拉加载更多&#39;,
 pullUpHeight: 60,
 height: 40,
 autoRefresh: false,
 downContent: &#39;释放后加载&#39;,
 upContent: &#39;上拉加载更多&#39;,
 loadingContent: &#39;加载中...&#39;,
 clsPrefix: &#39;xs-plugin-pullup-&#39;
 }
 export default {
 components: {
  XHeader,
  Scroller
 },
 mounted() {
  this.$nextTick(() => {
  this.$refs.scrollerBottom.reset({top: 0})
  })
  this.loadMore()
 },
 data() {
  return {
  list: [],
  pullupDefaultConfig: pullupDefaultConfig,
  pulldownDefaultConfig: pulldownDefaultConfig
  }
 },
 methods: {
  fetchData(cb) {
  axios.get(&#39;http://localhost:3000/&#39;).then(response => {
   this.$nextTick(() => {
   this.$refs.scrollerBottom.reset()
   })
   cb(response.data)
  })
  },
  refresh() {
  this.fetchData(data => {
   this.list = data.list
   this.$refs.scrollerBottom.enablePullup()
   this.$refs.scrollerBottom.donePulldown()
  })
  },
  loadMore() {
  this.fetchData(data => {
   if (this.list.length >= 10) {
   this.$refs.scrollerBottom.disablePullup()
   }
   this.list = this.list.concat(data.list)
   this.$refs.scrollerBottom.donePullup()
  })
  }
 }
 }
</script>
<style lang="less">
 .box {
 padding: 5px 10px 5px 10px;
 &:first-child {
  padding: 0 10px 5px 10px;
 }
 &:last-child {
  padding: 5px 10px 0 10px;
 }
 }
 .list {
 background-color: #fff;
 border-radius: 4px;
 border: 1px solid #f0f0f0;
 padding: 30px;
 }
 .xs-plugin-pulldown-container {
 line-height: 40px;
 }
 .xs-plugin-pullup-container {
 line-height: 40px;
 }
</style>

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

Verwandte Artikel:

Wie verwende ich node.js und andere Technologien, um die Anmelde- und Registrierungsfunktion zu implementieren?

So verwenden Sie den Filter in Vue

Gzip-Komprimierungsproblem in HTTP

Probleme im Zusammenhang mit Textvermeidung in Front-End-Algorithmen (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo integrieren Sie vux in vue.js, um Pull-Up-Laden und Pull-Down-Aktualisierung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!