Problème d'actualisation déroulante du mini programme

Dans le mini programme, le hook de vie onLoad n'est appelé qu'une seule fois lors de la création de la page. Après avoir effectué le saut de page naviguer vers, revenez à la page de niveau supérieur. Puisque le saut de vie navigationTo masque uniquement la page actuelle, le hook de vie onLoad. est appelé lors du retour à la page de niveau supérieur. Il ne sera pas exécuté à nouveau. L'avantage est que la page peut être affichée rapidement, mais les données de la requête dans onLoad ne seront pas mises à jour en temps réel. L'opération d'actualisation -down est nécessaire pour aider à mettre à jour manuellement les données de la page. Ensuite, cet article nous présentera trois façons d'implémenter l'actualisation déroulante dans les mini-programmes

enablePullDownRefresh

enablePullDownRefresh est le moyen le plus simple d'implémenter l'actualisation déroulante. Définissez activatePullDownRefresh dans le fichier json sur true, écoutez simplement l'événement onPullDownRefresh dans la page. Il prend en charge le fait de cliquer sur la barre de titre supérieure pour revenir en haut. personnalisation de la barre de titre. Vous pouvez également déclencher l'événement d'actualisation déroulante en appelant directement wx.startPullDownRefresh() pour générer une animation d'actualisation déroulante. Après le traitement, une fois les données de l'actualisation déroulante mises à jour, appelez wx.stopPullDownRefresh(. ) pour terminer l'animation.

L'avantage de cette forme de rafraîchissement déroulant est évidemment qu'il est simple et n'a aucune restriction, mais les inconvénients sont également évidents :

• Le menu déroulant l'animation est trop simple, et l'interaction n'est pas assez élégante. L'animation déroulante ne peut pas être personnalisée
• Lors de la personnalisation de la barre de titre, positionnement fixe, la barre de titre sera également déroulante. ensemble sous Android

scroll-view

scroll-view est un composant officiel de scroll view Il est très simple à utiliser si vous le souhaitez. pour configurer le code d'actualisation pull-up, le code est le suivant :

<scroll-view>
  <view>content</view>
</scroll-view>

Vous souhaitez utiliser le défilement - Pour implémenter l'actualisation pull-up de la vue, veuillez noter :

• Assurez-vous de définir une hauteur fixe pour la vue de défilement, sinon l'événement d'écoute ne sera pas déclenché
• paramètres Défilement vertical-y
La hauteur du contenu dans la vue défilante doit être supérieure à la hauteur de la vue défilante, sinon le défilement vertical ne peut pas se produire et l'événement d'écoute ne peut pas être déclenché
Scroll- voir Inconvénients :

Étant donné qu'iOS a un effet élastique, l'effet final sera quelque peu différent de celui d'Android
Lorsque vous ouvrez la page pour la première fois , tirer vers le haut ne déclenchera pas l'événement d'écoute pull-up. Vous devez d'abord faire défiler vers le bas pour déclencher le défilement, puis tirer vers le haut et faire défiler à nouveau pour déclencher l'événement d'écoute
Quand vous y êtes. est un auto- Lors de la définition de la tête, la vue par défilement nécessite un calcul de hauteur, soustrayez la hauteur de la tête
avantages de la vue par défilement :

peut être personnalisé Chargement de l'animation
Le code est relativement simple
• Par rapport à activatePullDownRefresh, la vue par défilement est plus pratique pour faire défiler la liste contrôle :
  faire défiler vers la vue : faire défiler jusqu'à l'élément spécifié
  activer le retour en haut : cliquer sur iOS dans la barre d'état supérieure, Android double-cliquez sur la barre de titre. Lorsque , la barre de défilement revient en haut, ne prend en charge que l'orientation verticale et deviendra invalide après avoir personnalisé la barre de titre
Officiellement, il n'est pas recommandé d'utiliser la vue déroulante pour l'actualisation déroulante, il y a une telle astuce dans la documentation officielle

Actualisation déroulante personnalisée

Auto Le principal problème que la définition de l'actualisation déroulante espère résoudre est le problème que la barre de titre ou la barre de navigation positionnée de manière fixe sera retiré lorsqu'Android utilise activatePullDownRefresh En même temps, les animations aux deux extrémités lors de l'actualisation déroulante restent cohérentes. En fait, ce n'est pas difficile à implémenter. Suivant Jetons un coup d'œil à l'implémentation spécifique :

wxml :

<view>
  <view>
    <view></view>
    <text>{{state === 0 ? '下拉刷新' : state === 1? '松开刷新' : '刷新中'}}</text>
  </view>
  <view>
    <slot></slot>
  </view>
</view>

Ce fichier définit le modèle du composant. Il possède un package de vue de défilement, lié à l'événement tactile, qui contient l'animation lors du rafraîchissement déroulant, et un slot, slot Utilisé pour insérer le contenu de la liste déroulantewxss:

.animation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150rpx;
  margin-bottom: -150rpx;
  background-color: #fff;
}
.loading {
  width: 30rpx;
  height: 30rpx;
  border:6rpx solid #333333;
  border-bottom: #cccccc 6rpx solid;
  border-radius: 50%;
  animation:load 1.1s infinite linear;
      
}
@keyframes load{ 
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

.tip {
  margin-left: 10rpx;
  color: #666;
}

Fichier de style Cela n'a rien de spécialjs:

let lastY = 0 // 上一次滚动的位置
let scale = 750 / wx.getSystemInfoSync().windowWidth // rpx转化比例
Component({
  options: {
    multipleSlots: true
  },
  data: {
    scrollTop: 0,
    translateHeight: 0, // 平移距离
    state: -1
  },
  properties: {
    // 触发下拉刷新的距离
    upperDistance: {
      type: Number,
      value: 150
    }
  },
  methods: {
    // 监听滚动，获取scrollTop
    onPageScroll (e) {
      this.data.scrollTop = e.scrollTop
    },
    touchStart (e) {
      lastY = e.touches[0].clientY
    },
    touchMove (e) {
      let clientY = e.touches[0].clientY
      let offset = clientY - lastY
      if (this.data.scrollTop > 0 || offset  this.data.upperDistance) {
        this.data.state = 1
      }
      this.setData({
        translateHeight: this.data.translateHeight,
        state: this.data.state
      })
    },
    touchEnd (e) {
      if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
        this.setData({
          translateHeight: 150
        })
        this.triggerEvent('scrolltoupper')
        this.setData({
          state: 2
        })
      } else if (this.data.scrollTop  {
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
      })
    }
  }
})

La chose la plus importante à propos de ce composant d'actualisation déroulant est de contrôler le timing de pull-down rafraîchissement , le code est incarné en définissant une upperDistance et la distance de rafraîchissement déroulante est utilisée pour déterminer s'il faut effectuer un rafraîchissement. Lorsque le doigt glisse, la distance de glissement est obtenue et la translationHeight est accumulée pour l'affichage. Dans l'événement touchEnd, il est jugé si la distance de glissement atteint la valeur définie. Lorsque la valeur définie est atteinte, l'événement scrolltoupper est envoyé et peut. être surveillé dans le composant parent. Dans le cas contraire, l'actualisation est arrêtée.

Utilisation :

<header></header>
<refresh-scroll>
  <view>{{item}}</view>
</refresh-scroll>

Page({
  data: {
    list: []
  },
  onLoad: function () {
    this.refreshScroll = this.selectComponent('#refreshScroll')
    for (let i = 0; i  {
      wx.hideLoading()
    }, 1000)
  },
  refresh: function (e) {
    setTimeout(() => {
      this.refreshScroll.stopRefresh()
    }, 1000)
  }
})

La clé lors de son utilisation est de transmettre la valeur obtenue dans onPageScroll dans la page, puis bindscrolltoupper écoute l'événement scrolltoupper, effectue l'opération de rafraîchissement puis appelle stopRefresh pour arrêter le rafraîchissement, descendez voir les résultats du test sur l'appareil réel :

iOS :

Android :

Lors de tests sur machine réelle, les performances étaient plutôt bonnes. Bien sûr, il ne s'agit que d'un simple exemple de composant d'actualisation déroulante personnalisée si nécessaire. utilisé dans des projets réels, vous devrez peut-être encore l'améliorer vous-même. Après tout, différentes personnes ont des scénarios d'application différents. Voici juste une idée

Résumé

Cet article. introduit petit Il existe trois façons de dérouler et d'actualiser le programme. Les deux premières sont officiellement fournies par le mini-programme. La dernière est un résumé personnel des pensées. Il est également relativement simple à écrire. le projet, vous devez encore l'améliorer vous-même. J'espère juste que cela pourra être fait pour tout le monde. La personnalisation de l'actualisation déroulante donne une idée.

Tutoriel recommandé : "Mini programme WeChat"

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!