미니 프로그램 개발의 기초: 슬라이딩 조작(10)

실제 모바일 애플리케이션의 상호작용 방식에서 가장 많이 사용되는 방식은 슬라이딩 조작이다. 왼쪽과 오른쪽으로 슬라이드하여 페이지를 전환하고, 손가락을 펼쳐 사진을 확대하는 등의 작업은 모두 슬라이드 작업으로 수행됩니다.

위챗 애플릿에서 기본적으로 제공하는 관련 이벤트는 다음과 같습니다.

터치 관련 동작 이벤트

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!