Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-06-12 18:08:12
Original
2498 Leute haben es durchsucht

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>
Nach dem Login kopieren

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
Nach dem Login kopieren
//...
 methods: {
 fetchData(cb) {
  axios.get(&#39;http://localhost:3000/&#39;).then(response => {
  this.$nextTick(() => {
   this.$refs.scrollerBottom.reset()
  })
  cb(response.data)
  })
 }
 }
//...
Nach dem Login kopieren

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()
  })
 }
 }
//...
Nach dem Login kopieren

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

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

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage