【小程序】可拖动悬浮按钮，无惯性

最新推荐文章于 2024-07-05 16:41:23 发布

蒙古野驴

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量90

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_48059135/article/details/114576835

版权

【小程序】可拖动悬浮按钮，无惯性

感谢甲方使我成长￣へ￣

效果图：
可拖动悬浮按钮
WXML：

<button 
  style="z-index:{{i==0?3:1}};top:{{movebtn.top}}px;border-radius:50%; left:{{movebtn.left}}px;width:{{movebtn.width}}px;position: fixed;height:{{movebtn.height}}px;background-image:url('/imgs/index_xuan_fu.png');background-size:contain;" 
  catchtouchmove="buttonMove" 
  bindtouchstart="buttonStart" 
  bindtouchend="buttonEnd"
  class="xuan_fu">
</button>

WXSS：

.xuan_fu{
  padding: 0rpx;
  background: rgba(0, 0, 0, 0);
}

JS：

const t = getApp()
var startPoint;
Page({
  data: {
    btnmoving:false,
    movebtn:{width:44,height:44,top:330,left:t.globalData.screenWidth-88},
  },
  onLoad() {

  },
  buttonMove:function (e) {
    var that = this;
    var i = 0;
    var movebtn = that.data.movebtn;
    var endPoint = e.touches[e.touches.length - 1]
    var buttonTop = endPoint.clientY-movebtn.height/2
    var buttonLeft = endPoint.clientX-movebtn.width/2
    //判断是移动否超出屏幕
    if (buttonLeft + movebtn.width >= t.globalData.screenWidth) {
      buttonLeft = t.globalData.screenWidth - movebtn.width;
    }
    if (buttonLeft <= 0) {
      buttonLeft = 0;
    }
    if (buttonTop <= t.globalData.nav_top+50) {
      buttonTop = t.globalData.nav_top+50
    }
    if (buttonTop + 120 >= t.globalData.screenHeight) {
      buttonTop = t.globalData.screenHeight - 120;
    }
    //buttonTop = buttonTop+t.globalData.nav_top+30
    movebtn.left = buttonLeft;
      movebtn.top = buttonTop;
      that.setData({
        movebtn: movebtn
      })
  },
  buttonStart: function (e) {
    startPoint = e.touches[0]
    this.setData({
      btnmoving:true
    })
  },
  buttonEnd:function(e){
    this.setData({
      btnmoving:false
    })
  },
})