Grundlagen der Miniprogrammentwicklung: Gleitoperation (10)

Bei der tatsächlichen Interaktionsmethode mobiler Anwendungen ist die Schiebeoperation die häufigste. Das Schieben nach links und rechts zum Wechseln der Seiten, das Spreizen der Finger zum Vergrößern von Bildern usw. erfolgen alle durch Schiebevorgänge.

Die vom WeChat-Applet standardmäßig bereitgestellten relevanten Ereignisse sind wie folgt:

Berührungsbezogene Betriebsereignisse

TapEntsprechend den Klickvorgängen steht auch Longtap zur Verfügung, um lange Druckvorgänge zu unterstützen. Diese sind relativ einfach, daher werde ich nicht auf Details eingehen.
touchmove entspricht dem Schiebevorgang, und Sie können über bindtouchmove auf den Schiebevorgang reagieren.

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

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

Wenn Sie die view-Beschriftung gedrückt halten und die Maus bewegen, wird das Schiebeereignis kontinuierlich ausgelöst, bis die Maus losgelassen wird Wenn sich die Maus aus der view herausbewegt Im Beschriftungsbereich wird das Ereignis trotzdem ausgelöst .

Drag-Bedienung

Durch das Abhören von Schiebeereignissen können einige praktische Funktionen implementiert werden. Benutzer, die das iPhone verwendet haben, kennen beispielsweise assistivetouch, eine Verknüpfungstaste auf dem Desktop, mit der die Schaltfläche gezogen werden kann an eine beliebige Stelle auf dem Desktop. Der Einfachheit halber wird die Schaltfläche durch einen Kreis dargestellt.

//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)
  },
})

Ansicht folgt

Nun, der Knopf ist etwas hässlich, darum geht es nicht. Die Implementierungsidee des Drag-and-Drop-Vorgangs ist ebenfalls sehr einfach. Wenn ein Schiebeereignis ausgelöst wird, enthält das Ereignisobjekt die Koordinateninformationen der aktuellen Berührungsposition, die über event.touches[0].pageX und event.touches[0].pageY abgerufen werden können Ist Berührungen ein Array? Die Antwort ist, mehrere Berührungen zu unterstützen (ich weiß nicht, wie man Multi-Touch auf einem Computer simuliert). Stellen Sie als Nächstes die Position der Schaltfläche auf die Berührungsposition ein, um den gewünschten Effekt zu erzielen. Probieren wir es aus.

Definieren Sie die Positionsdaten der Schaltfläche ballBottom und ballRight auf der Seite und binden Sie sie an die entsprechenden Attribute der Ansicht.

//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)
  },
})

Als nächstes aktualisieren Sie die Positionsdaten der Schaltfläche in der handletouchmove-Methode

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

Es wurde festgestellt, dass der Effekt grundsätzlich erzielt werden kann, es gibt jedoch zwei Probleme. Zum einen wird die Schaltfläche aus dem Bildschirmrand gezogen und die zweite Schaltfläche befindet sich immer unten rechts auf der Maus.
Als nächstes beurteilen Sie die Bildschirmgrenzen und korrigieren die Tastenposition. Die Bildschirmgröße kann über wx.getSystemInfo ermittelt werden.
Der vollständige Code lautet wie folgt:

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,
    });
  },
})

Führen Sie ihn erneut aus, alles ist in Ordnung.

Gestenerkennung

Verschiedene Gestenvorgänge können durch die Verarbeitung von Gleitvorgängen erkannt werden, wie z. B. Links- und Rechtsgleiten usw. Die Idee ist auch sehr einfach: Binden Sie einfach die Ereignisse touchstart und touchmove und identifizieren und berechnen Sie dann die Koordinateninformationen (z. B. current.PageX – last.PageX < 0 wird als nach links gleitend betrachtet)

//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)
  },
})

Führen Sie das Programm aus und wenn Sie nach links wischen, view wird „Nach links wischen“ angezeigt, und das Gleiche gilt für die rechte Seite.

Links- und Rechtsgleiten sowie Auf- und Abwärtsgleiten gleichzeitig erkennen
Manchmal möchten Sie gleichzeitig das Links- und Rechtsgleiten sowie das Auf- und Abgleiten erkennen Vergleichen Sie den Unterschied auf der X-Achse mit dem Unterschied auf der Y-Achse. Der größere Unterschied ist die Gleitrichtung.

 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,
    });
  },

Wenn in tatsächlichen Anwendungen eine bestimmte Geste ausgelöst wird, wird die Geste erkannt, bis der Benutzer die Maus oder den Finger loslässt. Wenn der Benutzer beispielsweise die Wischgeste nach links auslöst und dann nach unten wischt, muss der Benutzer immer noch der Wischgeste nach links folgen.
Eine Markierung kann definiert werden, um die erste erkannte Geste aufzuzeichnen. Wenn die Geste erkannt wurde, können nachfolgende Schiebevorgänge ignoriert werden, bis der Benutzer die Maus oder den Finger loslässt. Das Freigeben der Maus- oder Fingerbedienung kann durch Binden des handletouchend-Ereignisses erfolgen.

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
Da Multi-Touch ein echtes Gerät zum Testen erfordert und meine Appid noch beantragt wird, kann ich die Erklärung nur verschieben. Hier ist eine allgemeine Idee: Indem Sie Ihre Finger öffnen und Ihre Finger spreizen , können Sie beispielsweise die Bewegungsrichtung der beiden Berührungspunkte bestimmen. Beispielsweise gleitet der Berührungspunkt nach links , und der Berührungspunkt auf der rechten Seite gleitet nach rechts. Das heißt, es kann als eine Fingerspreizung-Operation beurteilt werden.

Das obige ist der detaillierte Inhalt vonGrundlagen der Miniprogrammentwicklung: Gleitoperation (10). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!