実際のモバイルアプリケーションの操作方法では、最も一般的なのはスライド操作です。左右にスライドしてページを切り替えたり、指を広げて寫(xiě)真を拡大したり、すべてスライド操作で行います。

WeChat アプレットによってデフォルトで提供される関連イベントは次のとおりです。

タッチ関連の操作イベント

tap はクリック操作に対応し、longtap も長(zhǎng)押し操作をサポートするために提供されます。これらは比較的単純であり、さらに Tell する必要はありません。
touchmoveはスライド操作に対応しており、bindtouchmoveを通じてスライド操作に対応できます。

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

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

bindtouchmove即可響應(yīng)滑動(dòng)操作。

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

當(dāng)按住view標(biāo)簽并滑動(dòng)鼠標(biāo)時(shí)，會(huì)不停的觸發(fā)滑動(dòng)事件，直到放開(kāi)鼠標(biāo)，當(dāng)鼠標(biāo)移出view標(biāo)簽區(qū)域后依然會(huì)觸發(fā)事件。

拖拽操作

通過(guò)監(jiān)聽(tīng)滑動(dòng)事件，可以實(shí)現(xiàn)一些實(shí)用的功能，比如用過(guò)iphone的用戶(hù)都知道assistivetouch，一個(gè)桌面上的快捷按鈕，可以將按鈕拖動(dòng)到桌面的任意位置。為了方便，這里就用一個(gè)圓形來(lái)代表該按鈕。

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

視圖跟隨

好吧，按鈕丑了點(diǎn)，這不是重點(diǎn)。拖拽操作的實(shí)現(xiàn)思路也很簡(jiǎn)單，當(dāng)觸發(fā)滑動(dòng)事件時(shí)，event對(duì)象會(huì)包含當(dāng)前觸摸位置的坐標(biāo)信息，可以通過(guò)event.touches[0].pageX和event.touches[0].pageY 來(lái)獲取，為什么touches是數(shù)組呢，答案是為了支持多點(diǎn)觸控(在電腦上不知道如何模擬多點(diǎn)觸控)。接下來(lái)將按鈕的位置設(shè)置為觸摸位置，應(yīng)該就能實(shí)現(xiàn)預(yù)期效果了，讓我們?cè)囋嚳础?/p>

在Page中定義按鈕的位置數(shù)據(jù)ballBottom和ballRight，并綁定到view的對(duì)應(yīng)屬性中。

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

接下來(lái)在handletouchmove方法中更新按鈕的位置數(shù)據(jù)

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

運(yùn)行發(fā)現(xiàn)基本可以實(shí)現(xiàn)效果，不過(guò)有兩個(gè)問(wèn)題，一是會(huì)將按鈕拖出屏幕邊緣，二是按鈕始終在鼠標(biāo)右下方。
接下來(lái)加入對(duì)屏幕邊界的判斷并對(duì)按鈕位置進(jìn)行修正。其中屏幕大小可以通過(guò)wx.getSystemInfo來(lái)獲取。
完整代碼如下：

//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 : "沒(méi)有滑動(dòng)",
  },
  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 = "向左滑動(dòng)"
    else if (((currentX - this.data.lastX) > 0))
      text = "向右滑動(dòng)"

    //將當(dāng)前坐標(biāo)進(jìn)行保存以進(jìn)行下一次計(jì)算
    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)
  },
})

再次運(yùn)行，一切ok。

手勢(shì)識(shí)別

通過(guò)處理滑動(dòng)操作可以識(shí)別各種手勢(shì)操作，如左右滑動(dòng)等。思路也很簡(jiǎn)單，通過(guò)綁定touchstart和touchmove事件，然后對(duì)坐標(biāo)信息進(jìn)行識(shí)別計(jì)算即可(如current.PageX - last.PageX < 0則認(rèn)為是向左滑動(dòng))

 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 = ""
    //左右方向滑動(dòng)
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0)
        text = "向左滑動(dòng)"
      else if (tx > 0)
        text = "向右滑動(dòng)"
    }
    //上下方向滑動(dòng)
    else {
      if (ty < 0)
        text = "向上滑動(dòng)"
      else if (ty > 0)
        text = "向下滑動(dòng)"
    }

    //將當(dāng)前坐標(biāo)進(jìn)行保存以進(jìn)行下一次計(jì)算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

運(yùn)行程序，當(dāng)向左滑動(dòng)時(shí)會(huì)view會(huì)顯示"向左滑動(dòng)", 向右同理。

同時(shí)識(shí)別左右滑動(dòng)和上下互動(dòng)
有時(shí)候希望同時(shí)識(shí)別左右和上下滑動(dòng)，可以通過(guò)比較X軸上的差值和Y軸上的差值，較大的差值為滑動(dòng)方向。

Page({
  data: {
    lastX: 0,
    lastY: 0,
    text : "沒(méi)有滑動(dòng)",
    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 = ""
    //左右方向滑動(dòng)
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0) {
        text = "向左滑動(dòng)"
        this.data.currentGesture = 1
      }
      else if (tx > 0) {
        text = "向右滑動(dòng)"
        this.data.currentGesture = 2
      }

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

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

    }

    //將當(dāng)前坐標(biāo)進(jìn)行保存以進(jìn)行下一次計(jì)算
    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 : "沒(méi)有滑動(dòng)",
    });
  },
})

在實(shí)際應(yīng)用中，當(dāng)某種手勢(shì)被觸發(fā)后，在用戶(hù)沒(méi)有放開(kāi)鼠標(biāo)或手指前，會(huì)一直識(shí)別為該手勢(shì)。比如當(dāng)用戶(hù)觸發(fā)左滑手勢(shì)后，這時(shí)再向下滑動(dòng)，仍要按照左滑手勢(shì)來(lái)處理。
可以定義一個(gè)標(biāo)記來(lái)記錄第一次識(shí)別到的手勢(shì)，如果已識(shí)別出手勢(shì)，后續(xù)的滑動(dòng)操作就可以忽略，直到用戶(hù)放開(kāi)鼠標(biāo)或手指。放開(kāi)鼠標(biāo)或手指操作可以通過(guò)綁定handletouchend view ラベルを押したままマウスをスライドすると、マウスを放すまでスライド イベントが継続的にトリガーされます。

マウスが view の外に出ると、スライド イベントが継続的にトリガーされます。コード>ラベル領(lǐng)域でも、イベント

をトリガーします。

ドラッグ アンド ドロップ操作

スライド イベントをリッスンすることで、いくつかの実用的な機(jī)能を?qū)g裝できます。たとえば、iPhone を使用したことのあるユーザーは、ボタンをドラッグしてデスクトップ上のショートカット ボタンを認(rèn)識(shí)できます。デスクトップ上の任意の場(chǎng)所。便宜上、ボタンを表すために円が使用されます。
rrreeeフォローするにはビューを表示

????OK、ボタンは醜いポイント、それは重要ではありません。ドラッグ アンド ドロップ操作の実裝アイデアも非常にシンプルで、スライド イベントがトリガーされると、イベント オブジェクトには現(xiàn)在のタッチ位置の座標(biāo)情報(bào)が含まれ、event.touches[0] を通じて渡すことができます。 .pageX と event.touches[0].pageY を?qū)g行すると、touches が配列である理由がわかります (マルチタッチをシミュレートする方法がわかりません)。コンピュータ上で）。次に、ボタンの位置をタッチ位置に設(shè)定します。これで目的の効果が得られるはずです。試してみましょう。 ????ページ內(nèi)でボタンの位置データ ballBottom と ballRight を定義し、ビューの対応する屬性にバインドします。 ??rrreee?? 次に、handletouchmove メソッドでボタンの位置データを更新します ??rrreee?? 実行してみると、基本的には効果が得られることが分かりましたが、問(wèn)題が 2 つあります。ボタンは畫(huà)面の端からドラッグされます。もう 1 つは、ボタンが常にマウスの右下にあることです。 ??次に畫(huà)面境界の判定を追加し、ボタン位置を修正します。畫(huà)面サイズは wx.getSystemInfo で取得できます。 ??完全なコードは次のとおりです: ??rrreee?? もう一度実行すると、すべて問(wèn)題ありません。 ??

ジェスチャー認(rèn)識(shí)

?? 左右スライドなどのスライド操作を処理することで、様々なジェスチャー操作を認(rèn)識(shí)できます。アイデアも非常にシンプルで、touchstart イベントと touchmove イベントをバインドして、座標(biāo)情報(bào) (current.PageX - last.PageX view に「左にスワイプ」と表示され、右も同様です。 ??????左右のスライドと上下のスライドを同時(shí)に識(shí)別します????左右のスライドと上下のスライドを同時(shí)に認(rèn)識(shí)したい場(chǎng)合があります。X 軸とY 軸上の差。大きい方の違いはスライド方向です。 ??rrreee??実際のアプリケーションでは、特定のジェスチャがトリガーされると、ユーザーがマウスまたは指を放すまでそのジェスチャが認(rèn)識(shí)されます。たとえば、ユーザーが左スワイプ ジェスチャをトリガーしてから下にスワイプした場(chǎng)合でも、ユーザーは引き続き左スワイプ ジェスチャに従う必要があります。 ??最初に認(rèn)識(shí)されたジェスチャを記録するためにマークを定義できます。ジェスチャが認(rèn)識(shí)された場(chǎng)合、ユーザーがマウスまたは指を放すまで、その後のスライド操作は無(wú)視されます。マウスまたは指の操作を放すことは、handletouchend イベントをバインドすることで処理できます。 ??rrreee????マルチタッチ???? マルチタッチはテストするために実機(jī)が必要で、私のappidはまだ申請(qǐng)中であるため、説明は後回しにするしかありません。たとえば、指 ?? を開(kāi)いた場(chǎng)合、左側(cè)のタッチ ポイントが左側(cè)にスライドし、右側(cè)のタッチ ポイントが移動(dòng)する方向を決定できます。右にある場(chǎng)合、?? と判斷できます。 指を開(kāi)いて操作します。 ??

以上がミニプログラム開(kāi)発の基礎(chǔ) スライド操作 (10)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。