小程序catchtouchmove事件

wxml:


	

wcss:

/* pages/move/move.wxss */
.moveWrap {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.move {
  height: 60rpx;
  width: 60rpx;
  border-radius: 50%;
  background: #ccc;
  position: absolute;
  top: 0;
  left: 0;
}

js:

// pages/move/move.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    x: 0,
    y: 0,
    windowW: 0,
    windowH: 0,
    rW: 60,
    rH: 60,
  },

  _minMove: function (e) {
    const {
      rH,
      rW,
      windowH,
      windowW
    } = this.data;
    let x = e.changedTouches[0].pageX;
    let y = e.changedTouches[0].pageY;

    if (e.changedTouches[0].pageX < 0) {
      x = 0;
    } else if (e.changedTouches[0].pageX >= (windowW - rW / 2)) {
      x = windowW - rW / 2;
    };

    if (e.changedTouches[0].pageY < 0) {
      y = 0;
    } else if (e.changedTouches[0].pageY >= (windowH - rH / 2)) {
      y = windowH - rH / 2;
    };

    this.setData({
      x,
      y
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      windowW: wx.getSystemInfoSync().windowWidth,
      windowH: wx.getSystemInfoSync().windowHeight
    });
  },

  
})

 

你可能感兴趣的:(小程序)