Un article explique en détail comment vue2 implémente la fonction de chargement déroulant avec amortissement

Cet article vous apporte des connaissances pertinentes sur vue2. Il explique principalement comment la fonction de chargement déroulant amorti est implémentée dans vue2. Les amis intéressés peuvent y jeter un œil ensemble. J'espère que cela vous sera utile. est utile.

En vue, les événements déclenchés doivent être liés

<div
  id="testchatBox"
  class="chatWrap"
  :style="{paddingTop: chatScroollTop + &#39;px&#39;}"
  @touchstart="touchStart" 
  @touchmove="touchMove"
  @touchend="touchEnd">
</div>

L'extrait de code utilise trois fonctions de rappel :

• touchstart : Au moment où le doigt touche l'écran

• touchmove : Le doigt est allumé Quand se déplacer sur l'écran

• touchend : Lorsque le doigt quitte l'écran

Comme le montre paddingTop, nous obtenons l'effet déroulant en contrôlant le remplissage en haut de la distance du conteneur. Notre réajustement consiste donc à déterminer la valeur de chatScrollTop via les trois fonctions de rappel ci-dessus.

Vous pouvez savoir grâce au nom chatScoollTop que notre actualisation déroulante est utilisée dans le conteneur de la boîte de discussion

Nous devons utiliser ces variables :

data() {
  return {
    chatScroollTop: 0, // 容器距离顶部的距离 
    isMove: false, // 是否处于touchmove状态
    startY: 0, // 当前手指在屏幕中的y轴值
    pageScrollTop: 0, // 滚动条当前的纵坐标
    
  }
}

Les trois fonctions de rappel correspondent à trois étapes, et notre code de base l'est également. divisé en trois parties :

Partie 1 : Initialiser la distance jusqu'au sommet du conteneur actuel, initialiser s'il est actuellement dans un état glissant et obtenir l'ordonnée de la barre de défilement actuelle.

touchStart(e) {
  // e代表该事件对象，e.targetTouches[0].pageY可以拿到手指按下的 y轴点
  this.startY = e.targetTouches[0].pageY
  // 开启下拉刷新状态
  this.isMove = false
  this.pageScrollTop = document.documentElement && document.documentElement.scrollTop
}

Partie 2 : Déterminez la distance entre le conteneur et le dessus en fonction de la différence d'ordonnée entre la distance actuelle du doigt actuel et le moment où il touche l'écran. Mais comme ça ne peut pas glisser tout le temps, ça donne une ambiance 0 -> 80. Afin de rendre le glissement plus intéressant, une valeur de pas est ajoutée pour ajuster le rapport de distance de glissement, ce que l'on appelle le rapport de distance signifie que plus le doigt est éloigné du début, plus la distance de glissement sera courte. Obtenez un effet d'amortissement.

touchMove(e) {
  // 这个 touchMove，只要页面在动都会发生的，所以 touching就起作用了
  // 获取移动的距离
  let diff = e.targetTouches[0].pageY - this.startY
  let step = 60
  if (diff > 0 && diff < 80 && this.pageScrollTop === 0) {
     step++ // 越来越大
     this.chatScroollTop += (diff / (step * 0.1)) // 越向下给人的阻力感越大
     this.isMove = true
  }
}

Partie 3 : Après avoir relâché votre doigt, donnez une distance par rapport au haut pour ajouter une barre de défilement de chargement.

  touchEnd() {
    if(this.isMove) {
      this.chatScroollTop = 40
      this.downCallback() // api拉取数据
    }
  }
  async downCallback() {
    try {
       // 拿数据 
    } catch() {} 
    finall{
      this.chatScrollTop = 0
    }
  }

Apprentissage recommandé : "Tutoriel vidéo vue.js"

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!