可移动的按钮单机无效
发布于 6 年前 作者 yantang 3882 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

按钮只能移动,单击事件不再触发

  • 预期表现

拖动时移动,单击时触发上传功能

  • 复现路径

WXML:

<button bindtap=‘upload_img’  catchtouchmove=“buttonMove” catchtouchstart=“buttonStart” catchtouchend=“buttonEnd” style=“top:{{buttonTop}}px;left:{{buttonLeft}}px;width: 50px;height:50px;border-radius:50px;position:fixed;background:#4267b2;line-height:50px;font-size:25pt;color:#fff;”>+</button><!–上传图像至服务器–>

JS:

var startPoint;

Page({

  data: {

    buttonTop: 0,

    buttonLeft: 0,

    windowHeight: ‘’,

    windowWidth: ‘’

  },

  onLoad: function (options) {

    var that =this;

    wx.getSystemInfo({

      success: function (res) {

        console.log(res);

        // 屏幕宽度、高度

        console.log(‘height=’ + res.windowHeight);

        console.log(‘width=’ + res.windowWidth);

        // 高度,宽度 单位为px

        that.setData({

          windowHeight:  res.windowHeight,

          windowWidth:  res.windowWidth

        })

      }

    })

  },

  onShow: function () {

 

  },

  buttonStart: function (e) {

    startPoint = e.touches[0]

  },

  buttonMove: function (e) {

    var endPoint = e.touches[e.touches.length - 1]

    var translateX = endPoint.clientX - startPoint.clientX

    var translateY = endPoint.clientY - startPoint.clientY

    startPoint = endPoint

    var buttonTop = this.data.buttonTop + translateY

    var buttonLeft = this.data.buttonLeft + translateX

    //判断是移动否超出屏幕

    if (buttonLeft+50 >= this.data.windowWidth){

      buttonLeft = this.data.windowWidth-50;

    }

    if (buttonLeft<=0){

      buttonLeft=0;

    }

    if (buttonTop<=0){

      buttonTop=0

    }

    if (buttonTop + 50 >= this.data.windowHeight){

      buttonTop = this.data.windowHeight-50;

    }

    this.setData({

      buttonTop: buttonTop,

      buttonLeft: buttonLeft

    })

  },

  buttonEnd: function (e) {

  }

})

  • 提供一个最简复现 Demo
2 回复

使用 bindtouchstart 即可

升级下微信版本试下?

回到顶部