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

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

亚连

Libérer： 2018-06-12 18:08:12

original

2526 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Appeler la méthode loadMore lors du chargement du composant

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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