Les composants uniapp et uview implémentent la liste déroulante d'actualisation inférieure

Voici un exemple d'utilisation du composant uView dans UniApp pour implémenter une liste d'actualisation déroulante et utiliser Axios pour demander une liste de données de pagination :

1. Tout d'abord, assurez-vous d'avoir ajouté la bibliothèque de composants uView dans le projet UniApp. Vous pouvez les installer en exécutant les commandes suivantes dans le répertoire racine du projet :

npm install uview-ui

Ou utilisez
le marché des plug-ins de Hbuilder X pour importer et utiliser, veuillez vous référer au site officiel pour plus de détails (recommandé)

https://v1.uviewui.com/components/install.html

2. Dans votre page Vue, importez la bibliothèque de composants uView et la bibliothèque Axios :

import uView from 'uview-ui';
Vue.use(uView);

//或者

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

3. Définissez les variables associées dans les données de votre page :

data() {
    
    
  return {
    
    
    list: [], // 存储列表数据
    page: 1, // 当前页数
    pageSize: 10, // 每页数据数量
    total: 0, // 总数据条数
    isLoading: false, // 是否正在加载数据
    status: 'loadmore',
	iconType: 'flower',
	loadText: {
    
    
		loadmore: '轻轻上拉',
		loading: '努力加载中',
		nomore: '实在没有了'
	},
  }
},

4. Initialisez les données de la page dans le cycle de vie monté, par exemple, demandez les données de la première page lors du chargement de la page :

onShow() {
    
    
  this.loadData();
},

5. Écrivez la méthode de demande de données, utilisez la méthode de demande fournie avec le plug-in uView pour envoyer des demandes de données de pagination :

methods: {
    
    
  loadData() {
    
    
    this.$u.get('url', {
    
    
        page: this.page,
        pageSize: this.pageSize
    })
    .then(response => {
    
    
      const data = response.data;
      this.list = this.list.concat(data.list); // 将返回的数据添加到列表数据中
      this.total = data.total; // 更新总数据条数
    })
    .catch(error => {
    
    
      console.error(error);
    });
  }
},

6. Utilisez le composant LoadMore de uView dans le modèle pour obtenir l'effet d'actualiser la liste lorsque la liste déroulante touche le fond :

<template>
  <view>
      <ul v-for="(item, index) in list" :key="index">
        <li>{
   
   { item.title }}</li>
      </ul>
    <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
  </view>
</template>

Pour des exemples spécifiques, veuillez vous référer au site officiel d'uView : https://v1.uviewui.com/components/loadMore.html

7. Ajoutez le contenu suivant dans le cycle de vie

onReachBottom() {
    
    
			let that = this;
			if(this.tableData.length == this.total) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
    
    
				that.loadData(); //请求的接口数据
				if(this.tableData.length == this.total) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},

Dans l'exemple ci-dessus :

• loadData()Le procédé est utilisé pour envoyer une requête pour obtenir des données paginées et mettre à jour les données de la page.
• listLes variables sont utilisées pour stocker les données de la liste.
• status Variable de texte utilisée pour identifier si les données sont en cours de chargement.
• onReachBottomUtilisé pour déclencher l'obtention de la page de données suivante.

L'exemple ci-dessus utilise le composant LoadMore de uView pour implémenter la liste d'actualisation déroulante. Vous pouvez modifier et ajuster en fonction de vos propres besoins, comme changer l'adresse d'interface et les paramètres de la demande et modifier la méthode de rendu de la liste.