Comment intégrer vux dans vue.js pour implémenter le chargement pull-up et l'actualisation déroulante

Cet article vous présente principalement les informations pertinentes sur vue.js intégrant l'actualisation pull-up, load et pull-down dans vux. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour l'étude de chacun. ou travailler. Il faut des amis, étudions ensemble.

Avant-propos

Vux est une bibliothèque de composants d'interface utilisateur de page mobile développée sur la base de Vue et Weui. L'intention de développement initiale est de répondre au WeChat de l'entreprise. le formulaire a besoin , car le système de formulaire de questionnaire tiers est vraiment moche sur les téléphones mobiles (le style PC est juste adapté à la taille). J'ai donc reconstruit le composant de formulaire en utilisant vue, puis je suis devenu incontrôlable et j'ai également développé d'autres composants couramment utilisés.

Par rapport à React, je préfère quand même Vue. Hormis le fait qu'il n'y a pas beaucoup de composants communautaires à l'heure actuelle, les outils de construction environnants sont relativement complets (l'auteur est également très appliqué).

Pas grand chose à dire ci-dessous, jetons un œil à l'introduction détaillée.

Première photo

Créer un projet

Utilisez vue-cli pour créer un projet vue

Installez vux, vous pouvez vous référer à : vux quick start

Configuration

Adresse officielle du document

Après l'avoir ouvert, vous verrez un paragraphe

Ce composant n'est plus maintenu et son utilisation n'est pas recommandée. Dans la plupart des cas, il n'y en a pas. besoin d'utiliser ce composant. Il est recommandé d'utiliser des composants tiers et les problèmes associés ne seront pas traités.

Je ne sais pas pourquoi l'auteur ne le maintient pas, il y a évidemment beaucoup de demande

Je n'ai pas utilisé le composant LoadMore dans la démo, j'ai utilisé l'utilisation- pullup et use-pulldown fournis avec Scroller. Ce qui suit est ma configuration

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

Demander des données de traversée d'interface

Le service d'interface utilise les données générées par mock.js, vous pouvez voir Consultez cet article : Utiliser mock.js pour des données aléatoires et utiliser express pour générer l'interface json

Installer axios

yarn add axios

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

Améliorer les méthodes d'actualisation et de chargement

//...
 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()
  })
 }
 }
//...

Appeler la méthode loadMore lors du chargement du composant

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

Terminer enfin la partie html

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

Code complet

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

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Comment utiliser node.js et d'autres technologies pour implémenter la fonction de connexion et d'enregistrement ?

Comment utiliser le filtre dans vue

Problème de compression Gzip dans HTTP

Problèmes liés à évitement de texte dans les algorithmes front-end (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!