Stratégie d'optimisation pour UniApp pour implémenter une liste déroulante et un chargement infini

UniApp met en œuvre des stratégies d'optimisation pour les listes déroulantes et le chargement infini

Avec le développement des applications mobiles, les listes déroulantes et le chargement infini sont devenus des exigences fonctionnelles courantes dans les applications mobiles. En tant que cadre de développement d'applications multiplateformes, UniApp peut s'adapter à plusieurs plates-formes en même temps, c'est pourquoi la prise en charge des listes déroulantes et du chargement infini est également devenue l'un des objectifs des développeurs. Cet article présentera la stratégie d'optimisation pour l'implémentation des listes déroulantes et du chargement infini dans UniApp, et donnera des exemples de code correspondants.

1. Implémentation de la liste déroulante

Dans UniApp, l'implémentation de la liste déroulante est basée sur le composant uni-list, qui peut réaliser l'affichage et le défilement de la liste. Afin d'optimiser l'effet de défilement, nous pouvons utiliser les stratégies d'optimisation suivantes.

1. Chargement des données dans les pages

Lorsqu'il y a trop de données de liste, le chargement de toutes les données en même temps entraînera un temps de chargement trop long, affectant sérieusement l'expérience utilisateur. Afin de résoudre ce problème, nous pouvons adopter la stratégie de chargement des données de pagination. Autrement dit, lorsque la page est chargée pour la première fois, seule une partie des données est chargée pour l'affichage, et lorsque l'utilisateur fait défiler vers le bas de la liste, les données de la page suivante sont chargées.

<template>
  <view>
    <uni-list :data="listData" :total="total" :page-size="pageSize" @loadmore="loadMore">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      total: 0, // 总数据量
      pageSize: 10, // 每页数据量
      currentPage: 1 // 当前页码
    };
  },
  mounted() {
    // 页面初次加载时加载第一页的数据
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据与总数据量
        this.listData = this.listData.concat(fakeData); // 假设fakeData为每页的数据
        this.total = 100; // 假设总数据量为100
      }, 500);
    },
    loadMore() {
      if (this.currentPage * this.pageSize < this.total) {
        this.currentPage += 1;
        this.loadData();
      }
    }
  }
};
</script>

2. Limitation et anti-shake

L'optimisation des listes déroulantes doit également prendre en compte les problèmes de performances causés par le défilement fréquent des utilisateurs. Afin de réduire le nombre de déclencheurs d'événements de défilement, nous pouvons utiliser des stratégies de limitation et d'anti-shake. La limitation signifie qu'une fonction n'est déclenchée qu'une seule fois dans un certain intervalle de temps ; l'anti-tremblement signifie que si une fonction est déclenchée plusieurs fois dans un certain intervalle de temps, seule la dernière fois est exécutée. Dans UniApp, nous utilisons souvent la méthode wx.createSelectorQuery pour obtenir des informations sur le conteneur de défilement. Nous pouvons optimiser les performances de la liste de défilement en définissant l'anti-shake ou la limitation de l'événement de défilement.

<template>
  <view>
    <uni-scroll-view :scroll-top="scrollTop" @scroll="scrollHandler">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      scrollTop: 0 // 滚动位置
    };
  },
  mounted() {
    // 页面初次加载时即加载全部数据
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据
        this.listData = fakeData; // 假设fakeData为全部数据
      }, 500);
    },
    scrollHandler(e) {
      if (this.throttleTimeout) clearTimeout(this.throttleTimeout);
      this.throttleTimeout = setTimeout(() => {
        this.scrollTop = e.detail.scrollTop;
        if (this.scrollTop < 10 && this.listData.length < fakeData.length) {
          this.loadData();
        }
      }, 100);
    }
  }
};
</script>

2. Implémentation du chargement infini

Le chargement infini fait référence à la fonction de chargement dynamique des données en bas de la liste afin qu'elles puissent charger automatiquement de nouvelles données au fur et à mesure que l'utilisateur fait défiler. Afin d'obtenir un chargement infini, nous pouvons adopter les stratégies d'optimisation suivantes.

1. Précharger la page suivante

Lorsque le dernier élément est affiché dans la liste, chargez les données de la page suivante à l'avance sans faire attendre l'utilisateur. Lorsque l'utilisateur fait défiler vers le bas, les données de la page suivante peuvent être affichées directement pour éviter un long temps de chargement.

<template>
  <view>
    <uni-list :data="listData" @loadmore="loadMore" :is-finished="isFinished">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
  </uni-list>
</view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      isFinished: false, // 数据是否加载完毕
      currentPage: 1 // 当前页码
    };
  },
  mounted() {
    // 页面初次加载时加载第一页的数据
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据
        this.listData = this.listData.concat(fakeData); // 假设fakeData为每页的数据
        // 当没有更多数据时，设置isFinished为true
        if (this.listData.length >= totalData.length) {
          this.isFinished = true;
        }
      }, 500);
    },
    loadMore() {
      if (!this.isFinished) {
        this.currentPage += 1;
        this.loadData();
      }
    }
  }
};
</script>

2. Prévenir les chargements répétés

Afin d'éviter de charger le même lot de données à plusieurs reprises, il est nécessaire d'éviter que l'événement de chargement des données ne se déclenche à nouveau avant que la requête ne soit terminée. Dans UniApp, nous pouvons déterminer si les données sont en cours de chargement en définissant un indicateur.

<template>
  <view>
    <uni-scroll-view :scroll-top="scrollTop" @scrolltolower="scrollToLower">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      scrollTop: 0, // 滚动位置
      isLoading: false // 是否正在加载数据
    };
  },
  mounted() {
    // 页面初次加载时即加载全部数据
    this.loadData();
  },
  methods: {
    loadData() {
      if (this.isLoading) return;
      this.isLoading = true;
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据
        this.listData = fakeData; // 假设fakeData为全部数据
        this.isLoading = false;
      }, 500);
    },
    scrollToLower() {
      if (this.isLoading) return;
      this.loadData();
    }
  }
};
</script>

Conclusion :

Les listes déroulantes et le chargement infini sont très courants dans les applications mobiles et sont cruciaux pour améliorer l'expérience utilisateur. Grâce à la stratégie d'optimisation d'UniApp, nous pouvons améliorer les performances et l'expérience utilisateur de l'application tout en assurant la réalisation des fonctions. J'espère que la liste déroulante UniApp et les stratégies d'optimisation de chargement infinies présentées dans cet article pourront être utiles à votre travail de développement.

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!