Comment implémenter plus de fonctions en cliquant pour charger dans uniapp

Avec le développement de l'industrie de la téléphonie mobile, les applications mobiles deviennent de plus en plus populaires et le développement multi-terminal est devenu une méthode courante. Sur cette base, uniapp s'est avéré être un framework de développement capable de développer simultanément iOS, Android, H5 et d'autres plates-formes. Dans Uniapp, comment obtenir davantage de clics pour charger ?

1. Utilisez le composant uni-list

uni-list est un composant de liste encapsulé par uniapp, qui implémente le rendu et le défilement de la liste. Dans Uni-List, un attribut supplémentaire Loadmore est défini, qui peut charger automatiquement la page suivante après avoir glissé vers le bas.

Tout d'abord, définissez le composant uni-list dans le modèle et définissez l'attribut loadmore sur true. Le code est le suivant :

<template>
  <uni-list :loadmore="true" :loadtext="loadtext" @loadmore="getMoreData">
    <uni-list-item v-for="(item, index) in listData" :key="index">
      {{item}}
    </uni-list-item>
  </uni-list>
</template>

Parmi eux, loadtext est le texte affiché lors du chargement, et getMoreData est une méthode personnalisée utilisée pour obtenir. les données de la page suivante.

Ensuite, définissez les données data et la méthode getMoreData dans le script. Le code est le suivant :

<script>
  export default {
    data() {
      return {
        // 列表数据
        listData: [],
        // 加载时的文本提示
        loadtext: '正在加载...',
        // 当前页码
        currentPage: 1,
        // 每页展示数量
        pageSize: 10
      }
    },
    methods: {
      getMoreData() {
        // 发送请求获取下一页数据
        uni.request({
          url: 'https://example.com/getMoreData',
          data: {
            page: this.currentPage + 1,
            pageSize: this.pageSize
          },
          success: res => {
            // 将数据添加到列表中
            this.listData = this.listData.concat(res.data.list)
            // 将页码+1
            this.currentPage++
            // 如果没有更多数据了，显示已经到底部
            if (!res.data.hasMoreData) {
              this.loadtext = '没有更多了'
            }
          },
          fail: err => {
            console.log(err)
          }
        })
      }
    }
  }
</script>

La méthode getMoreData implémente la fonction d'envoi d'une requête pour obtenir les données de la page suivante, et l'ajoute à la liste après avoir obtenu les données. données. En même temps, lorsqu'il n'y a plus de données à charger, le texte de chargement est défini sur "pas plus".

2. Bouton personnalisé pour déclencher le chargement de plus

En plus d'utiliser l'attribut loadmore d'uni-list, nous pouvons également utiliser des boutons personnalisés pour déclencher le chargement de plus de fonctions. La méthode de mise en œuvre spécifique est la suivante.

Tout d'abord, ajoutez un bouton personnalisé dans le modèle pour déclencher le chargement de plus. Le code est le suivant :

<template>
  <div>
    <uni-list :loadmore="false">
      <uni-list-item v-for="(item, index) in listData" :key="index">
        {{item}}
      </uni-list-item>
    </uni-list>
    <button @click="getMoreData">点击加载更多</button>
  </div>
</template>

Parmi eux, l'attribut loadmore d'uni-list est défini sur false, ce qui signifie que more ne sera pas chargé automatiquement et vous devez cliquer sur le bouton Déclenchement manuel.

Ensuite, définissez la méthode data data et getMoreData dans le script, le code est le suivant :

<script>
  export default {
    data() {
      return {
        // 列表数据
        listData: [],
        // 当前页码
        currentPage: 1,
        // 每页展示数量
        pageSize: 10,
        // 是否有更多数据
        hasMoreData: true
      }
    },
    methods: {
      getMoreData() {
        // 发送请求获取下一页数据
        uni.request({
          url: 'https://example.com/getMoreData',
          data: {
            page: this.currentPage + 1,
            pageSize: this.pageSize
          },
          success: res => {
            // 将数据添加到列表中
            this.listData = this.listData.concat(res.data.list)
            // 将页码+1
            this.currentPage++
            // 如果没有更多数据了，隐藏按钮
            if (!res.data.hasMoreData) {
              this.hasMoreData = false
            }
          },
          fail: err => {
            console.log(err)
          }
        })
      }
    }
  }
</script>

Dans la méthode getMoreData, nous envoyons également une requête pour obtenir la page de données suivante, et l'ajoutons à la liste après obtention les données. Lorsqu'il n'y a plus de données, définissez hasMoreData sur false afin que le bouton ne s'affiche plus.

Enfin, nous devons définir un jugement v-if sur le bouton pour déterminer s'il y a plus de données. Le code est le suivant :

<button v-if="hasMoreData" @click="getMoreData">点击加载更多</button>

De cette façon, nous pouvons charger manuellement plus de données en cliquant sur le bouton.

Résumé

Cet article présente deux façons d'obtenir davantage de clics pour charger dans uniapp : en utilisant des composants uni-list et des déclencheurs de boutons personnalisés. Quoi qu'il en soit, il s'agit essentiellement d'une méthode permettant d'envoyer une requête pour obtenir plus de données et les ajouter à une liste. Pour les développeurs, la méthode de mise en œuvre qu'ils choisissent peut être choisie en fonction de scénarios spécifiques.

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!