收藏
回答

可移动的按钮单机无效

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug button 工具 6.5.3 2.6.6

- 当前 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 个回答

登录 后发表内容