Comment implémenter la fonction de pagination de liste dans Uniapp

Comment implémenter la fonction de pagination de liste dans uniapp

Vue d'ensemble :
Dans le développement d'applications mobiles, il est souvent nécessaire d'afficher une grande quantité de données. Afin d'améliorer l'expérience utilisateur, les données sont souvent chargées dans des pages, ce qui réduit la quantité de données. données chargées en une seule fois et améliorant la vitesse de réponse. Cet article expliquera comment implémenter la fonction de pagination de liste dans uniapp et fournira des exemples de code.

1. Préparation :
   Tout d'abord, vous devez installer et introduire le composant uni-paging dans le projet uniapp. Il peut être installé via npm :

   npm i uni-paging

Ensuite, introduisez ce composant dans la page qui doit utiliser la fonction de pagination de liste :

import uniPaging from '@dcloudio/uni-paging'

2. Utilisez le composant uni-paging :
   Ensuite, utilisez uni-paging dans le modèle du composant de la page et définissez les propriétés et événements nécessaires :

<uni-paging
  ref="paging"
  :total="total"
  :current="current"
  @change="handleChange"
>
  <!-- 数据列表 -->
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>

  <!-- 加载更多 -->
  <view slot="loading" class="loading">
    数据加载中...
  </view>
</uni-paging>

Parmi eux, l'événement total属性表示总页数，current属性表示当前页码。@change sera déclenché lorsque le numéro de page change, et nous devons charger les données correspondant au numéro de page dans cet événement.

Définissez les données pertinentes dans data :

data() {
  return {
    list: [],   // 数据列表
    total: 0,   // 总页数
    current: 1  // 当前页码
  }
},

Définissez la méthode de chargement des données dans les méthodes et envoyez une requête d'interface pour obtenir des données en fonction du numéro de page :

methods: {
  loadData() {
    // 发送请求获取数据，此处为示例代码
    uni.request({
      url: 'https://example.com/data',
      data: {
        page: this.current,
        pageSize: 10  // 每页显示的数据量
      },
      success: (res) => {
        if (res.statusCode === 200) {
          this.list = res.data.list;   // 更新数据列表
          this.total = res.data.total; // 更新总页数
        }
      }
    })
  },

  handleChange(current) {
    this.current = current;   // 更新当前页码
    this.loadData();         // 加载对应页码的数据
  }
},

Lorsque la page se charge, démarrez le composant de pagination et chargez les données de la première page :

onLoad() {
  const paging = this.$refs.paging;
  paging.setOptions({
    loadingText: '正在加载...',
    statusTextMap: {
      more: '加载更多',
      noMore: '没有更多'
    }
  });
  this.loadData();
}

À ce stade, nous avons implémenté avec succès la fonction de pagination de liste dans uniapp.

Résumé :
En introduisant le composant uni-paging, nous pouvons facilement implémenter la fonction de pagination de liste dans uniapp. Définissez simplement les propriétés et les événements pertinents et écrivez la méthode pour charger les données. J'espère que l'introduction de cet article vous sera utile pour implémenter la fonction de pagination de liste dans le développement d'Uniapp.

Exemple de code :

<template>
  <view class="container">
    <uni-paging
      ref="paging"
      :total="total"
      :current="current"
      @change="handleChange"
    >
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
      </ul>

      <view slot="loading" class="loading">
        数据加载中...
      </view>
    </uni-paging>
  </view>
</template>

<script>
import uniPaging from '@dcloudio/uni-paging'

export default {
  components: {
    uniPaging
  },

  data() {
    return {
      list: [],
      total: 0,
      current: 1
    }
  },

  methods: {
    loadData() {
      uni.request({
        url: 'https://example.com/data',
        data: {
          page: this.current,
          pageSize: 10
        },
        success: (res) => {
          if (res.statusCode === 200) {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        }
      })
    },

    handleChange(current) {
      this.current = current;
      this.loadData();
    }
  },

  onLoad() {
    const paging = this.$refs.paging;
    paging.setOptions({
      loadingText: '正在加载...',
      statusTextMap: {
        more: '加载更多',
        noMore: '没有更多'
      }
    });
    this.loadData();
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  padding: 20rpx;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 10rpx;
  border-bottom: 1rpx solid #ddd;
}

.loading {
  text-align: center;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
</style>

Ce qui précède est un exemple simple de la façon d'implémenter la fonction de pagination de liste dans uniapp. En utilisant le composant uni-paging, nous pouvons facilement implémenter le chargement paginé des listes et améliorer l'expérience utilisateur. J'espère que cet article vous sera utile.

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!