Comment implémenter la fonction déroulante pour actualiser la page dans le mini programme ?

Comment implémenter la fonction déroulante pour actualiser la page dans le mini programme ? L'article suivant vous présentera comment implémenter l'actualisation déroulante dans l'interface de l'applet WeChat. 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.

Dans l'applet WeChat, actualiser la page via le menu déroulant est une opération de base. Lorsque la page actuelle est pleine, continuez à dérouler pour charger plus de contenu. Les mini-programmes et les pages Web peuvent implémenter cette fonction. La différence est que l'interface du mini-programme dispose d'une API qui peut implémenter la fonction d'actualisation déroulante, qui doit uniquement être appelée depuis le système.

En regardant la documentation de développement WeChat, nous pouvons voir que l'attribut activatePullDownRefresh est défini sur true. L'actualisation déroulante est activée par défaut. EnablePullDownRefresh peut être écrit dans app.json et xxx.json de la page. La différence entre les deux est que app.json est une actualisation déroulante globale, tandis que ***.json est une actualisation déroulante d'une seule page uniquement. les paramètres liés à la fenêtre peuvent être définis. Élément de configuration pour déterminer les performances de la fenêtre de cette page, il n'est donc pas nécessaire d'écrire la clé de la fenêtre. Une autre méthode consiste à écouter scroll-view et à personnaliser l'actualisation du menu déroulant. Il existe un attribut bindscrolltoupper dans scroll-view. Lors du défilement vers le haut/gauche, l'événement scrolltoupper sera déclenché, nous pouvons donc utiliser cet attribut pour implémenter. la fonction de rafraîchissement déroulante.

Les deux méthodes sont disponibles. La première est relativement simple et facile à utiliser. Après tout, certains systèmes logiques ont déjà été traités pour vous. La seconde convient aux petits programmes qui souhaitent personnaliser le pull-. style de rafraîchissement. Lorsque nous expliquons le commerce électronique, utilisons simplement le premier, qui est fourni par le système. L'objectif principal est d'apprendre à chacun comment l'utiliser.

1. Configuration des paramètres home.json

enablePullDownRefresh : true

La page que nous devons dérouler pour actualiser sera dans le xxx correspondant. json de cette page L'attribut ci-dessus est configuré dans le fichier. Vous pouvez également savoir, grâce au sens littéral de cet attribut, si l'actualisation déroulante est autorisée. Bien sûr, si vous ne souhaitez pas configurer chaque configuration pour autoriser l'actualisation déroulante. actualiser, vous pouvez configurer directement l'attribut ci-dessus dans la fenêtre de la variable globale app.json, afin que l'ensemble de tous les projets autorisent l'actualisation déroulante. Cela doit être ajouté car le système n'a pas la fonction d'actualisation déroulante par défaut. .

home.js

//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},

onPullDownRefresh surveillance des événements d'actualisation déroulante Jetez un œil aux détails à l'intérieur du code, wx.showNavigationBarLoading() et wx.hideNavigationBarLoading() sont utilisés pour contrôler. l'affichage et le masquage du petit chrysanthème. Comme nous n'avons pas encore expliqué la demande du réseau, j'ai simulé le chargement du réseau et utilisé la méthode setTimeout. Cette méthode peut également simuler le temps consommé par le chargement du réseau. le chargement du réseau est terminé, nous devons arrêter l'actualisation déroulante wx.stopPullDownRefresh().

Charger plus

Il existe deux façons de charger plus

1 Appeler l'API du système

2. Surveiller le défilement-. vue, bindscrolltolower glisse vers le bas de la surveillance

la méthode de traitement est légèrement différente de l'actualisation déroulante, mais identique.

home.js

onReachBottom: function () {
console.log(\'加载更多\')
setTimeout(() => {
this.setData({
isHideLoadMore:true,
recommends: [
{
goodId: 7,
name:\'.....\',
url: \'....\',
imageurl:\'......\',
},
{
goodId: 10,
name:\'......\',
url:\'......\',
},
],
})
}, 1000)
}

le système onReachBottom fournit une surveillance des événements de fond, tout comme l'actualisation déroulante, nous simulons également certaines données et ajoutons un événement de retard, isHideLoadMore, un personnalisé La valeur est utilisé pour contrôler l'affichage et le masquage du contrôle de chargement

home.wxml

Loading

Il existe également des moyens d'implémenter l'actualisation déroulante dans l'applet Il en existe d'autres qui peuvent imiter la page Web H5, mais grâce à l'utilisation d'interfaces API, l'applet WeChat peut réduire la charge des développeurs lors de la mise en œuvre de la fonction d'actualisation déroulante.

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!