Bases du développement de mini-programmes : opération coulissante (10)

Dans la méthode d'interaction actuelle des applications mobiles, la plus courante est l'opération de glissement. Glisser vers la gauche et la droite pour changer de page, écarter les doigts pour agrandir les images, etc. se font tous par des opérations de glissement.

Les événements pertinents fournis par défaut par l'applet WeChat sont les suivants :

Événements d'opération liés au toucher

tapCorrespondant aux opérations de clic, longtap est également fourni pour prendre en charge les opérations d'appui long. Celles-ci sont relativement simples, je n'entrerai donc pas dans les détails.
touchmove correspond à l'opération de glissement, et vous pouvez répondre à l'opération de glissement via bindtouchmove.

//wxml
<view id="id" bindtouchmove="handletouchmove" style = "width : 100px; height : 100px; background : #167567;">
</view>

//js
Page({
  handletouchmove: function(event) {
    console.log(event)
  },
})

Lorsque vous appuyez et maintenez l'étiquette view et faites glisser la souris, l'événement de glissement sera déclenché en continu jusqu'à ce que la souris soit relâchée Lorsque la souris sort du view. zone d'étiquette, l'événement sera toujours déclenché .

Opération glisser

En écoutant les événements de glissement, certaines fonctions pratiques peuvent être implémentées. Par exemple, les utilisateurs qui ont utilisé l'iPhone connaissent assistivetouch, un bouton de raccourci sur le bureau, qui permet de faire glisser le bouton. vers n'importe où sur le bureau. Pour plus de commodité, un cercle est utilisé pour représenter le bouton.

//wxml
<view id="id" class = "ball" bindtouchmove="handletouchmove" style = "width : 60px; height : 60px; background : #545345;">
</view>

//wxss
.ball {
  box-shadow:2px 2px 10px #AAA;
  border-radius: 20px;
  position: absolute; 
}

//js
Page({
  handletouchmove: function(event) {
    console.log(event)
  },
})

Voir les suivis

Eh bien, le bouton est un peu moche, mais ce n'est pas le sujet. L'idée de mise en œuvre de l'opération glisser-déposer est également très simple. Lorsqu'un événement coulissant est déclenché, l'objet événement contiendra les informations de coordonnées de la position tactile actuelle, qui peuvent être obtenues via event.touches[0].pageX et event.touches[0].pageY. est-ce que touche un tableau ? La réponse est de prendre en charge plusieurs Touch (je ne sais pas comment simuler le multi-touch sur un ordinateur). Ensuite, réglez la position du bouton sur la position tactile, ce qui devrait obtenir l'effet souhaité. Essayons.

Définissez les données de position du bouton ballBottom et ballRight dans la page et liez-les aux attributs correspondants de la vue.

//wxml
<view id="id" class = "ball" bindtouchmove="handletouchmove" style = "width : 60px; height : 60px; background : #545345; top:{{ballTop}}px; left: {{ballLeft}}px">
</view>

//js
Page({
  data: {
    ballTop: 0,
    ballLeft: 0,
  },
  handletouchmove: function(event) {
    console.log(event)
  },
})

Ensuite, mettez à jour les données de position du bouton dans la méthode handletouchmove

handletouchmove: function(event) {
  console.log(event)
  this.setData ({
    ballTop: event.touches[0].pageY,
    ballLeft: event.touches[0].pageX,
  });
},

On constate que l'effet peut fondamentalement être obtenu, mais il y a deux problèmes. La première est que le bouton sera déplacé hors du bord de l’écran et que le deuxième bouton sera toujours en bas à droite de la souris.
Ensuite, ajoutez un jugement sur les limites de l'écran et corrigez la position du bouton. La taille de l'écran peut être obtenue via wx.getSystemInfo.
Le code complet est le suivant :

Page({
  data: {
    ballTop: 0,
    ballLeft: 0,
    screenHeight:0,
    screenWidth:0

  },
  onLoad: function () {
      //获取屏幕宽高
    var _this = this;
    wx.getSystemInfo({
     success: function (res) {
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
        });
      }
    });
  },
  handletouchmove: function(event) {
    console.log(event)
    let pageX = event.touches[0].pageX;
    let pageY = event.touches[0].pageY;
    //屏幕边界判断
    if (pageX < 30 || pageY < 30)
      return;
    if (pageX > this.data.screenWidth - 30)
      return;
    if (pageY > this.data.screenHeight - 30)
      return;
    this.setData ({
      ballTop: event.touches[0].pageY - 30,
      ballLeft: event.touches[0].pageX - 30,
    });
  },
})

Exécutez-le à nouveau, tout va bien.

Reconnaissance gestuelle

Diverses opérations gestuelles peuvent être reconnues en traitant des opérations de glissement, telles que le glissement vers la gauche et la droite, etc. L'idée est également très simple, il suffit de lier les événements touchstart et touchmove, puis d'identifier et de calculer les informations de coordonnées (telles que current.PageX - last.PageX < 0 est considéré comme glissant vers la gauche)

//wxml
<view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" style = "width : 100%px; height : 40px;">
{{text}}
</view>

//js
Page({
  data: {
    lastX: 0,
    lastY: 0,
    text : "没有滑动",
  },
  handletouchmove: function(event) {
    console.log(event)
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY

    console.log(currentX)
    console.log(this.data.lastX)
    let text = ""
    if ((currentX - this.data.lastX) < 0)
      text = "向左滑动"
    else if (((currentX - this.data.lastX) > 0))
      text = "向右滑动"

    //将当前坐标进行保存以进行下一次计算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

  handletouchtart:function(event) { 
    console.log(event)
    this.data.lastX = event.touches[0].pageX
    this.data.lastY = event.touches[0].pageY
  },
  handletap:function(event) {
    console.log(event)
  },
})

Exécutez le programme, et lorsque vous glissez vers la gauche, view affichera "Swipe to the left", et la même chose s'applique à droite.

Identifier les glissements à gauche et à droite et les interactions de haut en bas en même temps
Parfois, vous souhaitez identifier les glissements à gauche et à droite et les glissements de haut en bas en même temps. comparez la différence sur l'axe X avec la différence sur l'axe Y. La plus grande différence est la direction de glissement.

 handletouchmove: function(event) {
    console.log(event)
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY
    let tx = currentX - this.data.lastX
    let ty = currentY - this.data.lastY
    let text = ""
    //左右方向滑动
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0)
        text = "向左滑动"
      else if (tx > 0)
        text = "向右滑动"
    }
    //上下方向滑动
    else {
      if (ty < 0)
        text = "向上滑动"
      else if (ty > 0)
        text = "向下滑动"
    }

    //将当前坐标进行保存以进行下一次计算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

Dans les applications réelles, lorsqu'un certain geste est déclenché, le geste sera reconnu jusqu'à ce que l'utilisateur relâche la souris ou le doigt. Par exemple, lorsque l'utilisateur déclenche le geste de balayage vers la gauche puis glisse vers le bas, l'utilisateur doit toujours suivre le geste de balayage vers la gauche.
Une marque peut être définie pour enregistrer le premier geste reconnu. Si le geste a été reconnu, les opérations de glissement ultérieures peuvent être ignorées jusqu'à ce que l'utilisateur relâche la souris ou le doigt. La libération de l'opération de la souris ou du doigt peut être gérée en liant l'événement handletouchend.

Page({
  data: {
    lastX: 0,
    lastY: 0,
    text : "没有滑动",
    currentGesture: 0,
  },
  handletouchmove: function(event) {
    console.log(event)
    if (this.data.currentGesture != 0){
      return
    }
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY
    let tx = currentX - this.data.lastX
    let ty = currentY - this.data.lastY
    let text = ""
    //左右方向滑动
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0) {
        text = "向左滑动"
        this.data.currentGesture = 1
      }
      else if (tx > 0) {
        text = "向右滑动"
        this.data.currentGesture = 2
      }

    }
    //上下方向滑动
    else {
      if (ty < 0){
        text = "向上滑动"
        this.data.currentGesture = 3

      }
      else if (ty > 0) {
        text = "向下滑动"
        this.data.currentGesture = 4
      }

    }

    //将当前坐标进行保存以进行下一次计算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

  handletouchtart:function(event) { 
    console.log(event)
    this.data.lastX = event.touches[0].pageX
    this.data.lastY = event.touches[0].pageY
  },
  handletouchend:function(event) {
    console.log(event)
    this.data.currentGesture = 0
    this.setData({
      text : "没有滑动",
    });
  },
})

Multi-touch
Étant donné que le multi-touch nécessite un véritable appareil pour être testé et que mon application est toujours en cours de demande, je ne peux que reporter l'explication. Voici une idée générale. Par exemple, en ouvrant les doigts et en écartant les doigts , vous pouvez déterminer la direction de déplacement des deux points de contact respectivement. Par exemple, le point de contact de gauche glisse vers la gauche. , et le point de contact à droite glisse vers la droite. Autrement dit, cela peut être jugé comme une opération d'écartement des doigts.

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!