微信小程序之可拖动悬浮按钮的实现

柔情只为你懂 2022-03-01 04:38 1144阅读 0赞

# 微信小程序之可拖动悬浮按钮的实现 #

什么都不说先看效果图  
![在这里插入图片描述][20190321173621284.gif]  
下面上代码  
wxml

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) { 
    
      }
    })

ok,完成，很简单就不唠叨了

[20190321173621284.gif]: /images/20220301/5f41fa140a1543c68220263f4c16c5cf.png