?? ??? ??????? ???? ???? ?? ?? ???? ??? ???? ????. ??? ????? ?????? ???? ????, ???? ?? ??? ???? ?? ??? ?? ???? ???? ?????.

?? ????? ????? ???? ?? ???? ??? ????.

?? ?? ?? ???

tap?? ??? ???? longtap? ???? ?? ??? ??? ?????. ??? ????? ??? ???? ?????.
????? ???? ??? ????, bindtouchmove? ?? ???? ??? ??? ? ????.

rree

view ??? ?? ???? ???? ?????? ???? ?? ??? ???? ???? ???? ?????. ???? view ?? ?? ??? ??? ?. , ???? ?? ?????.

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

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

?? ??

???, ??? ????? ?? ??? ? ????. ??? ? ?? ??? ?? ????? ?? ?????. ???? ???? ???? ??? ????

?

? ?? ?? ? ?? ?? ?? ??? ?? ??? ?????. ??? ?????? ?? ?? ??? ???? ????(????? ?? ??? ??????? ??? ??????). ???? ?? ??? ?? ??? ???? ??? ??? ?? ? ????.

????? ??? ?? ??? ballBottom ? ballRight? ???? ?? ?? ?? ??? ??????. event.touches[0].pageX

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

event.touches[0].pageY ????

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

????? ??? ?? ???? ???????. ???? ????? ??? ?? ? ??? ? ?? ??? ????. ??? ?? ???? ??? ??????. ??, ??? ?? ??? ??? ??? ????.

???? ?? ??? ?? ??? ???? ?? ??? ?????. ?? ???

? ?? ? ? ????. handletouchmove?? ??? ??? ????.

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

?? ??? ???. ?? ?? ?????.
wx.getSystemInfo??? ??

?? ???? ? ???? ??? ???? ??? ??? ??? ??? ? ????. ????? ?? ?????. touchstart ? touchmove ???? ???? ?? ?? ??? ???? ????? ?? ???(?: current.PageX - last.PageX < 0? ???? ?????? ??? ?????)

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

????? ???? ???? ??????

? "???? ????"? ???? ???? ???????.

?? ????? ?? ????? ??? ??

view??? ?? ????? ?? ????? ??? ???? ?? ?? ????. X?? ??? Y?? ??? ??? ???. ??? ??? ???? ??? ????.

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

?? ????????? ?? ???? ???? ???? ???? ???? ?? ??? ?? ???? ?????. ?? ?? ???? ?? ???? ??? ??? ? ??? ?????? ???? ??? ?? ???? ??? ??? ???. ?? ??? ???? ????? ??? ??? ? ????. ???? ???? ???? ???? ???? ?? ??? ?? ???? ??? ??? ? ????. ???? ??? ?? ??? ???? ????? ??? ? ????.

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

????
handletouchend????? ?????? ?? ??? ????, ?? ? appid? ????? ??? ??? ???? ???. ???? ??? ??? ????. ?? ?? ???? ???

???? ??? ? ?? ??? ?? ??? ?? ??? ? ????. ?? ?? ?? ?? ??? ???? ?????. , ??? ???? ?? ?? ???? ????? ?????? ????. ?,

???? ??? ???? ??? ? ????.

? ??? ?? ???? ??? ??: ???? ??(10)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!