Comment le mini programme implémente-t-il la fonction de chargement de données dans les pages ?

Comment le mini programme implémente-t-il la fonction de chargement de données dans les pages ? L’article suivant vous le présentera. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Lorsque vous utilisez des applications avec de grandes quantités de données telles que QQ, Weibo ou news, vous rencontrez souvent la fonction de chargement de page. Elle propose non seulement un large éventail de scénarios d'application, mais a également une grande efficacité. Les mini-programmes WeChat peuvent également charger des données dans des pages. Cet article présente comment créer des données de chargement de page dans les mini-programmes WeChat.

Pour mettre en œuvre une telle fonction, il faut généralement ajouter le nombre actuel de pages demandées lors de la demande de données, ainsi que la taille de la page (le nombre affiché sur chaque page). Certaines interfaces utilisent également le début). décalage et décalage de fin de la requête. Par exemple, si vous affichez 10 données sur une page, la première requête (la première page) commencera par 0 et se terminera par 9, la deuxième page sera de 10 à 19, et bientôt. Puisque nous voulons implémenter la fonction de chargement de pagination, la chose la plus importante est le traitement des événements de pull-down et de pull-up. Les événements déclencheurs de pull-up et de pull-down ont été encapsulés pour nous dans l'applet WeChat, comme suit. 🎜>

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},

Peut-être que vous êtes nouveau dans le programme d'applet WeChat, les passionnés du programme seront confrontés à une question : pourquoi est-ce que je réécris les fonctions pull-up et pull-down, mais pourquoi les fonctions ne rappellent-elles pas lorsque je tire vers le haut ou vers le bas ? Pas de panique, c'est qu'en plus de réécrire ces deux fonctions, il faut aussi ajouter le code suivant au fichier de configuration json

{
enablePullDownRefresh: true
}

Avec le code ci-dessus, à chaque fois qu'on tire vers le haut ou vers le bas, la phase sera déclenchée.

Créer des données dans data

data: {
page: 1,
pageSize: 30,
hasMoreData: true,
contentlist: [],
},

la page est la page sur laquelle les données sont actuellement demandées, pageSize est la taille des données sur chaque page, hasMoreData est utilisé pour déterminer s'il faut continuer la demande lors de l'extraction up Données, c'est-à-dire y a-t-il plus de données. Lorsque notre demande de données réseau réussit, si la longueur des données demandées est inférieure à pageSize : 30, cela signifie qu'il n'y a plus de données, remplacez hasMoreData par false. Si la longueur des données demandées est de 30, cela signifie qu'il y a plus de données. alors hasMoreData sera modifié de manière permanente. est vrai et le numéro de page est augmenté de 1. Lorsque la page est déroulée, la page est d'abord modifiée en 1, puis les données sont interrogées lorsque la requête de données réussit, si. la page est 1, les données obtenues sont directement affectées à la liste de contenu. Si la page Si le nombre est supérieur à 1, les données demandées seront ajoutées à la liste de contenu. De cette façon, la fonction de chargement de page peut être réalisée.

Après l'analyse ci-dessus, nous avons une compréhension claire de l'implémentation du chargement de pagination, je présenterai donc ensuite l'implémentation du code.

getMusicInfo: function (message) {
var that = this
var data = {
showapi_appid:\'25158\',
showapi_sign:\'c0d685445898438f8c12ee8e93c2ee74\',
keyword: \'我\',
page:that.data.page
}
network.requestLoading(\'https://route.showapi.com/213-1\', data, message,function (res) {
console.log(res)
var contentlistTem= that.data.contentlist
if(res.showapi_res_code == 0) {
if(that.data.page == 1) {
contentlistTem= []
}
var contentlist =res.showapi_res_body.pagebean.contentlist
if(contentlist.length < that.data.pageSize) {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:false
})
} else {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:true,
page:that.data.page + 1
})
}
} else {
wx.showToast({
title: res.showapi_res_error,
})
}
}, function (res) {
wx.showToast({
title: \&#39;加载数据失败\&#39;,
})
})
},

La fonction ci-dessus est la logique de traitement des demandes pour obtenir des informations sur la liste de musique. Cette fonction a un message de paramètre, qui est utilisé pour afficher les informations d'invite lors du chargement des données. Par exemple, lors de l'extraction des informations d'invite. rafraîchit les données, lors de l'extraction, cela indique que davantage de données sont en cours de chargement.

Ensuite, nous commençons à charger les données une fois lors de l'entrée dans la page, c'est-à-dire dans la fonction onLoad, comme suit

onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
that.getMusicInfo(\'正在加载数据...\')
},

Ensuite, la mise en œuvre des fonctions pull-up et déroulante est la suivante

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
this.data.page = 1
this.getMusicInfo(\'正在刷新数据\')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
if(this.data.hasMoreData) {
this.getMusicInfo(\'加载更多数据\')
} else {
wx.showToast({
title: \'没有更多数据\',
})
}
},

La fonction de pagination peut mieux afficher le contenu aux utilisateurs et fidéliser les utilisateurs. De nos jours, les mini-programmes constituent un nouveau canal permettant aux utilisateurs d'obtenir des informations. De nombreux mini-programmes disposent déjà de fonctions de pagination. Il est préférable de combiner les données pour mettre en œuvre cette fonction. Si elle n'est pas gérée correctement, cela peut facilement entraîner une perte de données et des pertes inutiles.

Recommandé : "

Tutoriel de développement de mini-programmes"

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!